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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
js实现简单音乐播放器
Jun 30 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
Vue+Flask实现图片传输功能
Apr 01 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(2)
2006/10/09 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
PHP创建XML接口示例
2019/07/04 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
师范生自荐信范文
2013/10/06 职场文书
教师求职自荐信
2014/03/09 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
航空学院求职信
2014/06/11 职场文书
企业挂职心得体会
2014/09/10 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
服务器间如何实现文件共享
2022/05/20 Servers
python读取mat文件生成h5文件的实现
2022/07/15 Python