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


Posted in Javascript onAugust 31, 2017

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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
基于canvas粒子系统的构建详解
Aug 31 #Javascript
Vue 组件间的样式冲突污染
Aug 31 #Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 #Javascript
JavaScript基础之流程控制语句的用法
Aug 31 #Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 #Javascript
浅谈vue的踩坑路
Aug 31 #Javascript
You might like
php PDO中文乱码解决办法
2009/07/20 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
javascript生成大小写字母
2015/07/03 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
Python多线程实例教程
2014/09/06 Python
Python中自定义函数的教程
2015/04/27 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
Django如何实现防止XSS攻击
2020/10/13 Python
Python绘制数码晶体管日期
2021/02/19 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
优秀信贷员先进事迹
2014/01/31 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
导师就业推荐信范文
2014/05/22 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis