vue.js怎样给元素绑定事件 _Vue.js

Vue.js中，怎么给元素绑定事件？今天来总结一下绑定元素的三种方式。
一、事件绑定

< button v-on:click='click-me'>click me< /button>

我们可以简写成：

< button @click='click-me'>click me< /button> < script type = "text/javascript"> var demo = new Vue({el: '#example', methods:{ myclick:function(){ console.log('绑定普通点击事件')//绑定普通点击事件 } } }); < /script>

二、内置事件绑定在vue.js框架快速入门简明教程(四)：样式绑定和事件处理器中，我们讨论过事件修饰符和安监修饰符，这其实都是vue.js的内置事件绑定。
【vue.js怎样给元素绑定事件】例如：

< button @click.once='doonce'>只执行一次< /button>doonce:function(){ console.log('内置事件绑定')//只执行一次 }

三、自定义事件绑定Vue.js中的自定义事件的主要用法是把子元素的数据传递父元素。
自定义事件依赖监听：$on(eventName)和触发$emit(eventName)

< div id="example"> < button @click='myclick'>{{number}}< /button> < /div>< script type = "text/javascript"> var demo = new Vue({ el: '#example', data:{ number:0, }, methods:{ myclick:function(){ this.number+=1; this.$emit('text',Math.random()); } } }); demo.$on('text',function(val){ console.log(val)//随机数 }); < /script>

实例中我们通过绑定【myclick】点击事件来触发.$emit事件监听父元素的demo.$on事件，传递参数。
以上三种就是vue.js中事件绑定。