3种vue元素绑定事件方法详解

 

我们已经在之前的文章中详细介绍过样式绑定vue样式绑定和事件处理器详细讲解,今次我们讲vue中的时间绑定。

一、事件绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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的内置事件绑定。

例如:

1
2
3
4
5
<button @click.once='doonce'>只执行一次</button>

doonce:function(){
console.log('内置事件绑定')//只执行一次
}

三、自定义事件绑定

Vue.js中的自定义事件的主要用法是把子元素的数据传递父元素。 自定义事件依赖监听:$on(eventName)和触发$emit(eventName),实例中我们通过绑定【myclick】点击事件来触发.$emit事件监听父元素的demo.$on事件,传递参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="example">
<button @click='myclick'></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>

推荐阅读:

推荐阅读:

JavaScript面向对象编程及原型链理解【重点】

XMLHttpRequest对象原理和用法理解

JavaScript高阶函数常见用法大全

ES6之Map与Set数据类型——快速查找键值

ES6 块的作用域-let以及数组和字符串语法

本文为博主原创文章,知识共享,开源精神,转载注明出处。