我最近看 网上 VUE 的修饰符文章都是比较零散，索性自己跟着官网研究了一波，写代码试了一下。然后动手写下了这篇文章。
表单修饰符
lazy修饰符
我们使用v-model的数据是实时更新的，也就是我们输入的时候，值已经出来。 有时候我们想要等光标离开输入框再更新数据，这时候可以使用 lazy 修饰符。
<input v-model.lazy="msg" >
点击：在线运行 查看
number修饰符
如果用户想要把输入的值变成number 类型，可以使用number修饰符。 需要注意的是如果初始值或者第一次输入的值是非数字，出来的值也是字符串类型。所以最好加上type="number" 使用。
<input v-model.number="number">
总结一下：
1.如果输入框只有number修饰符的，但是初始化是字符串，或者初始是数字，但是删除数字后输入字符串，得到的也是一个字符串。打印的类型取决于输入框值的类型。
2.如果输入框有number修饰符的，而且设置类型是number。只能输入数字。打印的类型是 number。
3.输入框没有number修饰符的，设置类型是number。只能输入数字。打印的类型是 string。
点击: 在线运行 查看。
trim修饰符
跟普通 js 字符串方法 trim 一样。就是把输入框首尾的空格去掉,但是对于中间的空格没用。
<input v-model.trim="trim" >
点击：在线运行 查看
事件修饰符
one修饰符
这个修饰符的作用是事件只能生效一次，同样起作用于 VUE 组件。
<button v-on:click.once="doThis">点击我</button>
点击：在线运行 查看
stop修饰符
这个修饰符的作用是阻止单击冒泡事件,如果没有这个修饰符的话，外面的事件也会被触发。
<div class="outsidebox" v-on:click="outsideBox" >
<button v-on:click.stop="insideBox">点击我</button> </div>
上面的代码中外面的div 也有一个点击事件，如果没有 stop修饰符 的话，点击 button 会触发外面的点击事件。
这是加上stop修饰符之后只会触发里面的事件，不会冒泡。
点击：在线运行 查看
prevent修饰符
这个修饰符的作用是提交事件不再重载页面。表单提交过后，默认是重置页面，这个是阻止表单的默认重置行为。点开查看 event.preventDefault
<form @submit.prevent="onSubmit" ></form>
这是没有prevent修饰符的，我们点击提交后，页面重置，刚刚输入就没了。
点击：在线运行 查看
self修饰符
这个修饰符的作用是事件在该元素本身（而不是子元素）触发时触发回调。
<div v-on:click.self="outsideBox1()" style="width: 200px;height: 200px;background: black;"> <div style="width: 100px;height: 100px;background: white;"> </div> </div>
我们给外面的div 加上点击事件，因为只作用于自身，所以点击白色的盒子（子元素）没有效果。
点击：在线运行 查看
capture修饰符
这个修饰符的作用是当事件发生冒泡时，优先响应有capture的事件。若有多个该修饰符，由外到内触发。
事件流的三个阶段： 捕获阶段 处于目标阶段 冒泡阶段。
默认是冒泡阶段触发事件。
capture修饰符作用是把本应该在冒泡阶段的事件提前到捕获阶段。
<div v-on:click.capture="captureBox()"></div>
图中三个蓝色盒子，白色盒子，黑色盒子中最外层的黑色盒子有capture修饰符。
本来正常的是：
先执行蓝色盒子事件，冒泡。 然后执行白色盒子事件，冒泡。 最后执行黑色盒子事件。
现在给最外层的黑色盒子capture修饰符，变成：
捕获黑色盒子事件，执行。 切换到目标蓝色盒子事件，执行，冒泡。 最后执行白色盒子事件。
所以会看到先是弹出黑色盒子，然后是蓝色盒子，最后是白色盒子。
点击：在线运行 查看
passive修饰符
这个修饰符的作用是滚动事件的默认行为 (即滚动行为) 将会立即触发。不会等待onScroll完成。这个在移动端上面能提升很大的性能。 因为每次滚动事件都会去查询一下是否有preventDefault阻止默认行为发生。我们加上这个就是告诉浏览器，不用查询了，直接执行就可以。
可以看到滑动的时候会疯狂查询onScroll，加上passive修饰符可以提升移动端的性能。
点击：在线运行 查看
串联修饰符
修饰符可以串联使用，优先级是从左到右。
<a v-on:click.stop.prevent="doThat"></a>
按键修饰符
vue 允许为 v-on 监听键盘事件时添加按键修饰符。
比如下面的，只有在按下 enter 键的时候才会执行submit方法。
<input v-on:keyup.enter="submit">
按键码
下图是常见的键盘按键码
当然了，Vue 提供了绝大多数常用的按键码的别名：
- enter
- tab
- delete (捕获“删除”和“退格”键)
- esc
- space
- up
- down
- left
- right
可以点击击：在线运行 查看。当然了可能会跟浏览器的按键冲突不，一定能起效果。
该特性已经从web 标准中删除，稍微了解一下即可。 developer.mozilla.org/zh-CN/docs/…
系统修饰键
如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
- ctrl
- alt
- shift
- meta
在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
<div @click.meta="doSomething">Do something</div>
mac 按下 command 然后点击才会执行。
点击：在线运行 查看。
exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
即使 Alt 或 Shift 被一同按下时也会触发
<button @click.ctrl="onClick">A</button>
有且只有 Ctrl 被按下的时候才触发
<button @click.ctrl.exact="onCtrlClick">A</button>
没有任何系统修饰符被按下的时候才触发
<button @click.exact="onClick">A</button>
点击：在线运行 查看。 建议到本地尝试。
鼠标按钮修饰符
- left
- .right
- .middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
