5.Vue修饰符（Modifier）
目录
1. Vue环境搭建（Node）
2. npm与yarn详细使用
3. Vue介绍及其基本使用
4. Vue指令（Directives）
5. Vue修饰符（Modifier）
6. Vue计算属性（computed）和侦听器（watch）
7. webpack（module bundler，模块打包器）
8. webpack基本使用
9. webpack常用转换器（loader）与插件（plugin）
10. Vue实例
11. 模块管理规范（ES6、CommonsJs、AMD、CMD）
Vue修饰符（Modifier）
- 目录
- Vue修饰符（Modifier）
-
- 表单修饰符
-
- （1）.lazy
- （2）.number
- （3）.trim
- 事件修饰符
- 键盘（按键）事件
-
- 按键码
- 按键码详细
- 系统修饰键（2.1.0新增）
-
- .exact修饰符（2.5.0新增）
- 鼠标按钮修饰符（2.2.0新增）
- 为什么在HTML中监听事件？
Vue修饰符（Modifier）
修饰符（modifier）是以半角句号“.
”指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
<form v-on:submit.prevent="onSubmit">...form>
.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()
表单修饰符
| 表单修饰符 | 描述 |
|---|---|
| .lazy | 数据输入完成后再进行数据的传输 |
| .number | 将用户的输入值转为数值类型 |
| .trim | 过滤用户输入的首尾空白字符 |
（1）.lazy
在默认情况下，v-model 在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：
<input v-model.lazy="msg">
（2）.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在type="number"时，HTML 输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。
（3）.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节
为了解决这个问题，Vue.js为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的
| 事件修饰符 | 描述 |
|---|---|
| .stop | 阻止事件继续传播（阻止事件向上级DOM元素继续传递） |
| .prevent | 阻止默认事件的发生，事件不再重载页面 默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生 百度 此时点击超链接不会进行页面的跳转 |
| .capture | 捕获冒泡，即有冒泡发生时，有该修饰符的DOM元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 |
| .self | 将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响 |
| .once | 设置事件只能触发一次。比如按钮的点击等 |
| .passive | 告诉浏览器不阻止事件的默认行 |
| .native | 在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加“.native”事件是无法触发的 |
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击
<a v-on:click.stop="doThis">a>
<form v-on:submit.prevent="onSubmit">form>
<a v-on:click.stop.prevent="doThat">a>
<form v-on:submit.prevent>form>
<div v-on:click.capture="doThis">...div>
<div v-on:click.self="doThat">...div>
<a v-on:click.once="doThis">a>
<div v-on:scroll.passive="onScroll">...div>
once事件修饰符（2.1.4新增）
不像其它只能对原生的DOM事件起作用的修饰符，.once修饰符还能被用到自定义的组件事件上
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
passive事件修饰符（2.3.0新增）
Vue还对应addEventListener中的passive选项提供了.passive修饰符。
.passive修饰符尤其能够提升移动端的性能。
注意：不要把.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive会告诉浏览器你不想阻止事件的默认行为
<!-- 滚动事件的默认行为（即滚动行为）将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
键盘（按键）事件
在监听键盘事件时，经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符
| 键盘事件 | 描述 |
|---|---|
| @keydown | 键盘按下时触发 |
| @keypress | 键盘按住时触发 |
| @keyup | 键盘弹起 |
| 获取按键的键码 event.keyCode |
按键码
keyCode的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用keyCode attribute也是允许的
<input v-on:keyup.13="submit">
为了在必要的情况下支持旧浏览器，Vue提供了绝大多数常用的按键码的别名：
| 按键码别名 | 描述 |
|---|---|
| .esc | Esc键 |
| .tab | Tab键 |
| .ctrl | Ctrl键 |
| .alt | Alt键 |
| .enter | Enter键 |
| .delete | delete（删除）/BackSpace（退格） |
| .space | Space（空格键） |
| .up | Up（上箭头） |
| .down | Down（下箭头） |
| .left | Left（左箭头） |
| .right | Right（右箭头） |
键盘事件使用
@keyup.13 ⇒ 按回车键
@keyup.enter ⇒ 回车
@keyup.up ⇒ 上键
@keyup.down ⇒ 下键
@keyup.left ⇒ 左键
@keyup.right ⇒ 右键
@keyup.delete ⇒ 删除键
有一些按键（.esc 以及所有的方向键）在IE9中有不同的key值, 如果想支持IE9，这些内置的别名应该是首选。
还可以通过全局config.keyCodes对象自定义按键修饰符别名：
//可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
按键码详细
| 键盘按钮 | 键码 | 键盘按钮 | 键码 |
|---|---|---|---|
| Backspace（退格键） | 8 | Tab（制表键） | 9 |
| Enter（回车键） | 13 | Shift（上档键） | 16 |
| Ctrl（控档键） | 17 | Alt（换挡键） | 18 |
| Pause/Break（暂停/中断） | 19 | Caps Lack（大小写锁定） | 20 |
| Shift+Tab（上档+制表） | 25 | Esc（退出键） | 27 |
| Page Up（向上翻页） | 33 | Page Down（向下翻页） | 34 |
| End（结尾） | 35 | Home（开头） | 36 |
| Left Arrow（向左箭头） | 37 | Up Arrow（向上箭头） | 38 |
| Right Arrow（向右箭头） | 39 | Down Arrow（向下箭头） | 40 |
| Ins（插入键） | 45 | Del（删除键） | 46 |
| 左windows键 | 91 | 右windows键 | 92 |
| 上下文菜单键 | 93 | 数字小键盘0 | 96 |
| 数字小键盘1 | 97 | 数字小键盘2 | 98 |
| 数字小键盘3 | 99 | 数字小键盘4 | 100 |
| 数字小键盘5 | 101 | 数字小键盘6 | 102 |
| 数字小键盘7 | 103 | 数字小键盘8 | 104 |
| 数字小键盘9 | 105 | 数字小键盘* | 106 |
| 数字小键盘+ | 107 | 数字小键盘- | 109 |
| 数字小键盘. | 110 | 数字小键盘/ | 111 |
| F1 | 112 | F2 | 113 |
| F3 | 114 | F4 | 115 |
| F6 | 116 | F7 | 118 |
| F8 | 119 | F10 | 120 |
| F11 | 121 | F12 | 122 |
| Num Lock（数字锁） | 144 | Scrool Lock（滚动锁） | 145 |
| 分号 | 186（IE/Chrome/Safari） 59（Opera/Firefox） |
<（小于号） | 188 |
（大于号）| 190| /（正斜杠） |191
`（沉音符）| 192| =（等于号）| 61
[（左方括号）| 219| \（反斜杠） |220
]（右方括号） |221| 单引号 |222
| 键盘按钮 | 键码 | 键盘按钮 | 键码 |
|---|---|---|---|
| a A | 65 | n N | 78 |
| b B | 66 | o O | 79 |
| c C | 67 | p P | 80 |
| d D | 68 | q Q | 81 |
| e E | 69 | r R | 82 |
| f F | 70 | s S | 83 |
| g G | 71 | t T | 84 |
| h H | 72 | u U | 85 |
| i I | 73 | v V | 86 |
| j J | 74 | w W | 87 |
| k K | 75 | x X | 88 |
| l L | 76 | y Y | 89 |
| m M | 77 | z Z | 90 |
系统修饰键（2.1.0新增）
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器
| 系统修饰键 | 描述 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| .ctrl | Ctrl键 | ||||||||||
| .alt | Alt键 | ||||||||||
| .shift | Shift键 | ||||||||||
| .meta |
|
<input v-on:keyup.alt.67="clear">
<div v-on:click.ctrl="doSomething">Do somethingdiv>
请注意：修饰键与常规按键不同，在和keyup事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住ctrl的情况下释放其它按键，才能触发keyup.ctrl。而单单释放ctrl也不会触发事件。如果你想要这样的行为，请为ctrl换用keyCode：keyup.17
.exact修饰符（2.5.0新增）
.exact修饰符：允许控制由精确的系统修饰符组合触发的事件
<button v-on:click.ctrl="onClick">Abutton>
<button v-on:click.ctrl.exact="onCtrlClick">Abutton>
<button v-on:click.exact="onClick">Abutton>
鼠标按钮修饰符（2.2.0新增）
| 鼠标按钮修饰符 | 描述 |
|---|---|
| .left | 点击鼠标左键即可触发事件 |
| .right | 点击鼠标右键即可触发事件 |
| .middle | 按下滑轮触发事件 |
| 这些修饰符会限制处理函数仅响应特定的鼠标按钮 |
为什么在HTML中监听事件？
可能注意到这种事件监听的方式违背了关注点分离（separation of concern）这个长期以来的优良传统。但不必担心，因为所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致任何维护上的困难。实际上，使用v-on有几个好处：
（1）扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法
（2）无须在JavaScript里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试
（3）当一个ViewModel被销毁时，所有的事件处理器都会自动被删除。无须担心如何清理它们