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给组件绑定事件的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

    Cpage.js是一款轻量级的Mvvm框架,使用TypeScript(JavaScript的超集)开发. 内置模板引擎,路由,指令,http,dom等模块.可以方便地进行组件化开发,语法统一.易用,不依赖于第三方框架,适合中小项目开发. Cpage.js不仅可以给普通元素绑定事件,也可以给组件绑定事件! 首先,我们可以定义一个组件header var header = Cpage.component({ name: 'header', components: [], template: `<di

  • 浅谈vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> --> <input type="text" @keyup.native="show($event)

  • Javascript循环绑定事件的示例代码

    例如:一个不确定长度的列表,在鼠标经过某一条的时候改变背景. Untitled Page 第1条记录 第2条记录 第3条记录 第4条记录 第5条记录 第6条记录 var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 for (var i = 0; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 这个例子循环为一组对

  • vue如何给自定义的组件绑定点击事件

    目录 给自定义的组件绑定点击事件 给自定义组件添加单击事件 给自定义的组件绑定点击事件 在做项目中我们往往会封装许多的组件,来减少代码的重复性,提高代码的可利用性,有时候也会给组件绑定事件,但是经常会失效. 先给cardinfo这个组件绑定一个点击事件      <cardinfo         :content="content"         :from="from"         :ProPortrait="ProPortrait&quo

  • Vue.JS入门教程之事件监听

    你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel: <div id="demo"> <a v-on="click: onClick">触发一个方法函数</a> <a v-on

  • vue组件添加事件@click.native操作

    1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 2,等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) <Item @click.native = "shijian()"></Item> 补充知识:vue--组件间(兄弟组件间)事件派发与接收 法一 main.js 在初始化vue之前,给 data 添加一个名为 event 的空v

  • jquery1.10给新增元素绑定事件的方法

    jquery1.10去除了.live()方法,新增了一个.on()方法来给元素绑定事件,具体用法如下: on(events,[selector],[data],fn) 复制代码 代码如下: $("#dataTable tbody tr").on("click", function(event){ alert($(this).text()); }); 上面这中方法对所有的这个tr绑定了事件,但是对于新增的元素无法绑定事件. 复制代码 代码如下: $("#da

  • element-ui中select组件绑定值改变,触发change事件方法

    1.安装vuecli脚手架 2.终端输入 cnpm i element-ui -S 安装element-ui 3.按需引入select组件 在main.js中写入如下代码 /* 导入第三方库开始 */ import 'element-ui/lib/theme-chalk/index.css'; // 按需加载Select组件 import {Select,Option,Dialog,Button} from 'element-ui' Vue.use(Select) Vue.use(Option)

  • vue学习笔记之给组件绑定原生事件操作示例

    本文实例讲述了vue学习笔记之给组件绑定原生事件操作.分享给大家供大家参考,具体如下: 当在父组件中定义一个点击事件,并且在父组件的methods中定义了这个点击事件时,在页面上点击并不会有什么反应.那么该怎么办呢? 我们可以在子组件的template中的dom上定义一个点击事件(原生事件),并且在子组件的methods中定义该点击事件,然而点击页面时也只会alert(child click ). 这是为什么呢?父组件的点击事件被vue当成自定义事件,点击后没有检测到,这时需要子组件向父组件触发

  • el-select组件绑定change事件的踩坑记录

    目录 el-select组件绑定change事件踩坑 el-select实现change事件 总结 el-select组件绑定change事件踩坑 要注意区分elementUI组件(比如el-select.el-button.el-input等组件)的focus.click.change等事件和DOM的focus.click.change原生事件,二者是不一样的. 如果要在element组件上触发原生事件,一律都得加.native修饰符,否则无法触发事件. 但是要注意很多elementUI的组件

随机推荐