通用修饰符
.prevent
阻止默认事件行为，等价于 event.preventDefault()。
什么是默认事件？
比如a超链接标签，默认事件是点击该元素后跳转到指定的网页链接中，使用该修饰符后，点击后不再直接跳转。
html
<a @click href="www.baidu.com">阻止默认事件</a>.stop
阻止事件冒泡，等价于 event.stopPropagation()
什么是事件冒泡？
比如我给一个<div>绑定了点击事件A，然后在这个<div>里面再嵌套了一个<div>，并且绑定上一个点击事件B。因为子<div>嵌套在父<div>里面，因此当一个点击判定为点击了子<div>时，也会判定父<div>被点击，两者的点击事件会同时触发。这就是事件冒泡。
阻止了事件冒泡后，点击子<div>不再会判定为点击了父<div>（或者说阻止了判定向父<div>传递）
html
<div @click="father">
<div @click.stop="son">点击不会冒泡</div>
</div>.self
仅当事件从元素自身触发时生效（忽略子元素冒泡）
html
<div @click.self="father">
忽略子元素冒泡<div @click="son">点击会冒泡</div>
</div>.once
事件只触发一次
html
<button @click.once>仅生效一次</button>.passive
优化滚动性能，告诉浏览器无需等待事件处理完成（常用于移动端滚动）
html
<div @scroll.passive>
...
...
...
</div>.capture
使用事件捕获模式（从外层向内层触发，可理解为与事件冒泡正好相反）
html
<div @click.capture>
<p>捕获模式</p>
<div @click="son1"></div>
<div @click="son2"></div>
<div @click="son3"></div>
</div>v-model表单修饰符
.lazy
将 input 事件改为 change 事件（输入完成后同步）
vue是动态渲染的，通常v-model绑定的属性会被实时同步为input中的数据。使用.lazy之后，同步会在你的输入结束后（例如点击页面中其他地方）再进行。
html
<input v-model.lazy="message" type="text">.number
自动将输入转为数值类型，如果输入的数据不能转换为数值类型（例如"abc"），则保留原数据，不会进行数值类型转换。
html
<input v-model.number="age" type="number">.trim
自动去除输入首尾空格
例如输入：" haha haha "，使用该修饰符后，同步后的数据为："haha haha"。（字符串中间的空格不会去除）
html
<input v-model.trim="username">键盘事件修饰符
键盘事件修饰符中，像.enter这种指定对应键的有很多，像End键和Home键都有对应的.end和.home，具体的请参阅 vue官网文档 和 vue2官网文档。
按键别名
直接指定按键名（如 .enter, .tab, .esc, .space, .delete），当按下指定键时，触发绑定事件。
html
<input @keyup.enter="submit">使用场合：
比如百度的输入框，你可以在输入完搜索词之后，点击搜索栏的右边的按键可以提交搜索关键词信息，按下enter回车键也可以提交搜索关键词信息
html
<div>
<input v-model="message" @keyup.enter="submit">
<button @click="submit">
</div>系统修饰键
组合按键（.ctrl, .alt, .shift, .meta），即需要按住指定键后再点击按钮才会触发事件。
html
<div @click.ctrl="ctrlClick">需按住 Ctrl 点击</div>.exact
精确匹配按键组合（避免其他按键同时按下时触发）
html
<button @click.ctrl.exact="仅Ctrl按下时触发"></button>鼠标事件修饰符
.left（左键点击）
.right（右键点击）
.middle（中键点击）
html
<button @click.right="右键点击">使用右键点击</button>