在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。常见的事件修饰符如下：
.stop
.prevent
.capture
.self
.once
.native
.passive
…
.stop 阻止冒泡（指阻止事件向上级DOM元素传递，比较常用）
<!-- 阻止单击事件冒泡 --><a v-on:click.stop = "doThis"></a> .prevent 阻止事件的默认行为（指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等） <!-- 修饰符可以串联 --><a v-on:click.stop.prevent = "doThat"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent = "onSubmit"></form><!-- 只有修饰符 --><form v-on:submit.prevent></form> .capture 捕获冒泡（即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件） <!-- 添加事件侦听器时使用事件捕获模式 --><div v-on:click.capture = "doThis">...</div> .self 将事件绑定到自身，只有自身才能触发（通常用于避免冒泡事件的影响） <!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 --><div v-on:click.self = "doThat">...</div> .once 设置事件只能触发一次，比如按钮的点击等。 <!-- 提交事件只触发一次，不做重复提交 --><form v-on:submit.once= "onSubmit"></form> .native 在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的。 <!--可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。--><div v-on:click.native= "doThis">...</div> .passive 该修饰符大概意思用于对DOM的默认事件进行性能优化，根据官网的例子比如超出最大范围的滚动条滚动的。注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。