Cpage.js给组件绑定事件的实现代码

 更新时间:2017年08月31日 09:36:25   投稿:mrr  
Cpage.js是一款轻量级的Mvvm框架,使用TypeScript(JavaScript的超集)开发。下面通过本文给大家分享Cpage.js给组件绑定事件的实现代码,需要的的朋友参考下吧

Cpage.js是一款轻量级的Mvvm框架,使用TypeScript(JavaScript的超集)开发。

内置模板引擎,路由,指令,http,dom等模块。可以方便地进行组件化开发,语法统一、易用,不依赖于第三方框架,适合中小项目开发。

Cpage.js不仅可以给普通元素绑定事件,也可以给组件绑定事件!

首先,我们可以定义一个组件header

var header = Cpage.component({
  name: 'header',
  components: [],
  template: `<div>{{header}}--{{height}}</div>`,
  data: {
    header: 'this is header'
  },
  props: {
    height: {
      default: '10'
    }
  },
  beforeRender() {
  },
  render() {
  }
});

之后,在需要使用的地方引用他

<div>
  <div class="main" c-click="handelIf()">my app--templateId</div>
  <div c-if="{{ifTest}}">
    <article></article>
  </div>
   <header 
    height="{{headerHeight}}"
    c-click="headerClick()"
    ></header>
   <article></article> 
  <footer></footer> 
</div>

在组件上可以使用c-事件 的方式绑定事件

总结

以上所述是小编给大家介绍的Cpage.js给组件绑定事件的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JavaScript绑定事件监听函数的通用方法

    JavaScript绑定事件监听函数的通用方法

    这篇文章主要为大家详细介绍了JavaScript绑定事件监听函数的通用方法,感兴趣的朋友可以参考一下
    2016-05-05
  • IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块(不一定就是css,也可以是html代码,甚至是JavaScript代码)。
    2012-01-01
  • 详解js获取video任意时间的画面截图

    详解js获取video任意时间的画面截图

    这篇文章主要介绍了js获取video任意时间的画面截图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 微信小程序在地图选择地址并返回经纬度简单示例

    微信小程序在地图选择地址并返回经纬度简单示例

    这篇文章主要介绍了微信小程序在地图选择地址并返回经纬度,涉及微信小程序针对经纬度地址信息相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • DWR实现模拟Google搜索效果实现原理及代码

    DWR实现模拟Google搜索效果实现原理及代码

    本文主要介绍DWR实现模拟Google搜索效果实现原理,感兴趣的朋友可以了解下,或许对你的DWR学习有帮助,闲话就不多说了,看代码了
    2013-01-01
  • JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法

    JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法

    这篇文章主要介绍了JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的一种解决办法,本文还给大家介绍了js快速获取数组中最大值和最小值的方法,非常不错,需要的朋友可以参考下
    2016-07-07
  • JavaScript原始值与包装对象的详细介绍

    JavaScript原始值与包装对象的详细介绍

    这篇文章主要给大家介绍了关于JavaScript原始值与包装对象的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • bootstrap Table插件使用demo

    bootstrap Table插件使用demo

    本篇文章主要介绍了bootstrap Table插件使用demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript实现短信倒计时60s

    JavaScript实现短信倒计时60s

    本文给大家分享一段实例代码给大家详细介绍了JavaScript实现短信倒计时60s功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-10-10
  • JavaScript在多浏览器下for循环的使用方法

    JavaScript在多浏览器下for循环的使用方法

    JavaScript语言在不同的浏览器的下有存在细微的差异,但不像DOM操作差异那么大,现在为大家列举出其中一个"for循环"的差异,并介绍如何有效的解决这种差异
    2012-11-11

最新评论