.stop - 调用 event.stopPropagation() 阻止点击事件继续传播
阻止了事件冒泡,如果不添加 .stop 点击 thisClick 的同时 parentClick 也会被点击
<div v-on:click="parentClick">
<p>父级</p>
<button v-on:click.stop="thisClick">阻止单击事件继续传播</button>
</div>
.prevent - 调用 event.preventDefault() 阻止事件的默认行为
当添加 .prevent < a > 标签就没有跳转的行为
<a href="www.baidu.com" @click.prevent="goBaiDu">我不想去百度</a>
.once 只触发一次回调
每次初始化页面仅执行一次事件
<div @click.once="executeOnce(1)">点击输出</div>
.capture 添加事件侦听器时使用 capture 模式
即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁.
<!--点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3 。 由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件 -->
<div id="content">
<div id="obj1" v-on:click.capture="doc($event)">
obj1
<div id="obj2" v-on:click.capture="doc($event)">
obj2
<div id="obj3" v-on:click="doc($event)">
obj3
<div id="obj4" v-on:click="doc($event)">
obj4
</div>
</div>
</div>
</div>
</div>
.self 只当事件是从侦听器绑定的元素本身触发时才触发回调
在Vue中，由于事件捕获和冒泡的存在，当点击某个元素时会引发其父元素（父父元素、父父父元素…）的点击事件发生，使得点击某个元素时达不到想要的效果。.self修饰符可以很好的解决这一情况，.self修饰符只有在点击事件绑定的元素与当前被点击元素一致时才触发点击事件。
当给class为mid的div添加.self修饰符时，同样地点击id为inner的div，由于当前点击的元素不是class为mid的div，所以不会触发class为mid的点击事件。 console.log(event.currentTarget.id) 或者console.log(event.currentTarget.className) 这里class的值只能通过className获取类似于原生DOM属性获取
<div id="app">
<div id="outer" class="outer" @click="getTarget($event)">
outer
<div id="mid" class="mid" @click.self="getTarget($event)">
mid
<div id="inner" class="inner" @click="getTarget($event)">inner</div>
</div>
</div>
</div>
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
keyCode 按键号码 keyAlias 按键别名 示例中13是回车键的号码 ,示例含义当回车键盘弹起执行事件回调
keyCode对照表
<div>
<input type="text" @keyup.13="keyShow($event)">
</div>
.native 监听组件根元素的原生事件
在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触发。
注意:所有组件注册必须在 components 文件夹下,路由页面可以外部定义
<HelloWorld @click.native="HelloWorld"></HelloWorld>
2.2.0 以上版本新增
1. 只当点击鼠标中键时触发 : .middle
<div @click.middle="goClick()">
2. 只当点击鼠标左键时触发: .left
<div @click.left="goClick()">
3. 只当点击鼠标右键时触发: .right
<div @click.right="goClick()">
2.3.0 以上版本新增
.passive 以 { passive: true } 模式添加侦听器
passive这个修饰符会执行默认方法。
【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。】
通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。
这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。
注：.passive不能和.prevent修饰符一同使用，否则浏览器会报错。