个性化阅读
专注于IT技术分析

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

赞(0) 打赏
未经允许不得转载:srcmini » vue.js怎样给元素绑定事件
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏