VUE的事件修饰符
<div id="ON" v-on:click="handle0"><p v-text="num"></p>
@*v-on:click.stop="handle" 事件修饰符,在事件后面加.stop表示不再冒泡*@
<input id="Button1" v-on:click.stop="handle" type="button" value="点击" />
@*.prevent阻止事件默认行为 事件修饰符可以串联使用*@
<a href="http://www.baidu.com" v-on:click.prevent.stop="handle2">百度</a>
</div>
var ms = new Vue({el: "#ON",
data: {
num:0
},
methods: {
handle0: function () {
this.num++;
},
handle: function (event) {
//阻止冒泡 传统方式
//event.stopPropagation();
},
handle2: function (event) {
//阻止默认行为
//event.preventDefault();
}
}
})
主要的内容还是请看代码部分,对比了原生js的事件修饰符,以及VUE事件修饰符的展示
以下是所有的事件修饰符
.stop
- 调用event.stopPropagation()
。.prevent
- 调用event.preventDefault()
。.capture
- 添加事件侦听器时使用 capture 模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self
会阻止所有的点击,而 v-on:click.self.prevent
只会阻止对元素自身的点击。
以上是 VUE的事件修饰符 的全部内容, 来源链接: utcz.com/z/378361.html