事件修飾符

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>

.lazy

在預設情況下， v-model 在 input 事件中同步輸入框的值與資料，但你可以新增一個修飾符 lazy ，從而轉變為在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 --><inputv-model.lazy="msg">

.number

如果想自動將使用者的輸入值轉為 Number 型別（如果原值的轉換結果為 NaN 則返回原值），可以新增一個修飾符 number 給 v-model 來處理輸入值：

<inputv-model.number="age"type="number">

這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字串型別。

.trim

如果要自動過濾使用者輸入的首尾空格，可以新增 trim 修飾符到 v-model 上過濾輸入：

<inputv-model.trim="msg">