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的内置事件绑定。

例如：

<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中事件绑定。