# 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> ``` ```