在vue组件中经常会用到事件修饰符，今天用到修饰符发现又有些忘了，记录总结一下vue中的事件修饰符。
事件修饰符
.self
含义： 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
用途： 点击弹窗蒙层关闭弹窗，可以在最外层蒙层的点击事件上添加.self修饰符，这样弹窗内部的点击就不会触发蒙版的点击事件了，内部点击事件上添加.stop同样也可以阻止蒙层的点击事件被触发。
.stop
含义：阻止事件冒泡
用途：阻止事件向外层冒泡，触发外层事件
.capture
含义：添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
用途：内部元素触发的事件先在此处理
<div v-on:click.capture="clickEvent">...</div>
.prevent
含义：阻止默认事件
用途：如form的submit事件默认提交会刷新页面，.prevent修饰符可以阻止该默认事件
<form v-on:submit.prevent="onSubmit"></form>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击的默认行为，而 v-on:click.self.prevent 只会阻止对元素自身的点击的默认行为。
.once
版本： 2.1.4 新增
含义：该事件只执行一次
用途：对于只执行一次的事件
注意：不像其它修饰符只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
.passive
版本：2.3.0 新增
含义：不会等监听器执行完后onScroll再去执行默认行为 (监听器执行是要耗时的，有些甚至耗时很明显，这样就会导致页面卡顿)
用途：.passive 修饰符尤其能够提升移动端的性能。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
如果对passive还是不理解，另一篇文章会对passive详细讲解。
