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中事件绑定。
推荐阅读
- JavaScript 循环语句全集解析
- vue.js怎样使用v-if v-else
- C语言简明教程(五)(基本数据类型完整详解和使用实例)
- C语言简明教程(四)(C程序综合概述细节分析)
- JavaScript对象的创建使用与访问
- 控制台上的Ghostrunner是最糟糕的播放方式
- 游戏评测(Genshin Impact源真冲击)
- Gears POP!游戏服务器正在关闭
- Gears 5 Story DLC将于12月推出