# vue修饰符 ### 事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。 ``` <pre class="calibre13">``` <span class="token"><</span><span class="token">!</span><span class="token">--</span> 阻止单击事件冒泡 <span class="token">--</span><span class="token">></span> <span class="token"><</span>a v<span class="token">-</span>on<span class="token1">:</span>click<span class="token1">.</span>stop<span class="token">=</span><span class="token4">"doThis"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>a<span class="token">></span> <span class="token"><</span><span class="token">!</span><span class="token">--</span> 提交事件不再重载页面 <span class="token">--</span><span class="token">></span> <span class="token"><</span>form v<span class="token">-</span>on<span class="token1">:</span>submit<span class="token1">.</span>prevent<span class="token">=</span><span class="token4">"onSubmit"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>form<span class="token">></span> <span class="token"><</span><span class="token">!</span><span class="token">--</span> 修饰符可以串联 <span class="token">--</span><span class="token">></span> <span class="token"><</span>a v<span class="token">-</span>on<span class="token1">:</span>click<span class="token1">.</span>stop<span class="token1">.</span>prevent<span class="token">=</span><span class="token4">"doThat"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>a<span class="token">></span> <span class="token"><</span><span class="token">!</span><span class="token">--</span> 只有修饰符 <span class="token">--</span><span class="token">></span> <span class="token"><</span>form v<span class="token">-</span>on<span class="token1">:</span>submit<span class="token1">.</span>prevent<span class="token">></span><span class="token"><</span><span class="token">/</span>form<span class="token">></span> <span class="token"><</span><span class="token">!</span><span class="token">--</span> 添加事件侦听器时使用事件捕获模式 <span class="token">--</span><span class="token">></span> <span class="token"><</span>div v<span class="token">-</span>on<span class="token1">:</span>click<span class="token1">.</span>capture<span class="token">=</span><span class="token4">"doThis"</span><span class="token">></span><span class="token">...</span><span class="token"><</span><span class="token">/</span>div<span class="token">></span> <span class="token"><</span><span class="token">!</span><span class="token">--</span> 只当事件在该元素本身（而不是子元素）触发时触发回调 <span class="token">--</span><span class="token">></span> <span class="token"><</span>div v<span class="token">-</span>on<span class="token1">:</span>click<span class="token1">.</span>self<span class="token">=</span><span class="token4">"doThat"</span><span class="token">></span><span class="token">...</span><span class="token"><</span><span class="token">/</span>div<span class="token">></span> <span class="token"><</span><span class="token">!</span><span class="token">--</span> click 事件只能点击一次，<span class="token5">2.1</span><span class="token5">.4</span>版本新增 <span class="token">--</span><span class="token">></span> <span class="token"><</span>a v<span class="token">-</span>on<span class="token1">:</span>click<span class="token1">.</span>once<span class="token">=</span><span class="token4">"doThis"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>a<span class="token">></span> ``` ``` ### 按键修饰符 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： ``` <pre class="calibre13">``` <span class="token"><</span><span class="token">!</span><span class="token">--</span> 只有在 keyCode 是 <span class="token5">13</span> 时调用 vm<span class="token1">.</span><span class="token3">submit</span><span class="token1">(</span><span class="token1">)</span> <span class="token">--</span><span class="token">></span> <span class="token"><</span>input v<span class="token">-</span>on<span class="token1">:</span>keyup<span class="token1">.</span><span class="token5">13</span><span class="token">=</span><span class="token4">"submit"</span><span class="token">></span> ``` ``` 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名： ``` <pre class="calibre13">``` <span class="token"><</span><span class="token">!</span><span class="token">--</span> 同上 <span class="token">--</span><span class="token">></span> <span class="token"><</span>input v<span class="token">-</span>on<span class="token1">:</span>keyup<span class="token1">.</span>enter<span class="token">=</span><span class="token4">"submit"</span><span class="token">></span> <span class="token"><</span><span class="token">!</span><span class="token">--</span> 缩写语法 <span class="token">--</span><span class="token">></span> <span class="token"><</span>input @keyup<span class="token1">.</span>enter<span class="token">=</span><span class="token4">"submit"</span><span class="token">></span> ``` ``` 全部的按键别名： - `.enter` - `.tab` - `.delete`(捕获 "删除" 和 "退格" 键) - `.esc` - `.space` - `.up` - `.down` - `.left` - `.right` - `.ctrl` - `.alt` - `.shift` - `.meta` 实例 ``` <pre class="calibre14">``` <span class="token"><</span>p<span class="token">></span><span class="token"><</span><span class="token">!</span><span class="token">--</span> Alt <span class="token">+</span> <span class="token5">C</span> <span class="token">--</span><span class="token">></span> <span class="token"><</span>input @keyup<span class="token1">.</span>alt<span class="token1">.</span><span class="token5">67</span><span class="token">=</span><span class="token4">"clear"</span><span class="token">></span> <span class="token"><</span><span class="token">!</span><span class="token">--</span> Ctrl <span class="token">+</span> Click <span class="token">--</span><span class="token">></span> <span class="token"><</span>div @click<span class="token1">.</span>ctrl<span class="token">=</span><span class="token4">"doSomething"</span><span class="token">></span>Do something<span class="token"><</span><span class="token">/</span>div<span class="token">></span> ``` ```