事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通過由點(.)表示的指令字尾來呼叫修飾符。

• .stop
• .prevent
• .capture
• .self
• .once

<!-- 阻止單擊事件冒泡 --><av-on:click.stop="doThis"></a><!-- 提交事件不再過載頁面 --><formv-on:submit.prevent="onSubmit"></form>
 
<!-- 修飾符可以串聯  --><av-on:click.stop.prevent="doThat"></a><!-- 只有修飾符 --><formv-on:submit.prevent></form><!-- 新增事件偵聽器時使用事件捕獲模式 --><divv-on:click.capture="doThis">...</div><!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回撥 --><divv-on:click.self="doThat">...</div>
 
<!-- click 事件只能點選一次，2.1.4版本新增 --><av-on:click.once="doThis"></a>

按鍵修飾符

Vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符：

<!-- 只有在 keyCode 是 13 時呼叫 vm.submit() --><inputv-on:keyup.13="submit">

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 --><inputv-on:keyup.enter="submit"><!-- 縮寫語法 -->
 
<input @keyup.enter="submit">

全部的按鍵別名：

• .enter
• .tab
• .delete (捕獲 "刪除" 和 "退格" 鍵)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta

例項

<p><!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>