标签：code hand 产生 default vue top Once data event
<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 只会阻止对元素自身的点击。
标签：code hand 产生 default vue top Once data event
原文地址：https://www.cnblogs.com/ShenJA/p/11791047.html
