vue的事件修饰符们

【官方机票领取】更多消息请点击这里，送你去官方

①   .stop   阻止事件继续向上级DOM元素冒泡传递，相当于调用了event.stopPropagation()。

②   .prevent   阻止事件的默认行为，相当于调用了event.preventDefault()方法。

③   .capture   捕获冒泡，添加事件侦听器，使用捕获模式。（有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件）

④   .self   当前元素自身时触发处理函数。

⑤    .once   只会触发一次。

⑥   .passive   滚动事件的默认行为 (即滚动行为) 将会立即触发。通俗点说就是每次事件产生，浏览器都会去查询一下是否有event.preventDefault()阻止该次事件的默认动作。加上passive就是为了告诉浏览器，不用查询了，没用preventDefault阻止默认动作，能够提升移动端的性能。

⑦   .native   将原生事件绑定到组件上

 

注意：修饰符可以同时使用多个,但是可能会因为顺序而有所不同，从左往右判断。

用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

 

注意：不要把 .passive 和 .prevent 一起使用，

因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。