vue 修飾符

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

Vue.js經過由點(.)表示的指令後綴來調用修飾符。

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

一、事件修飾符

<!-- 阻止單擊事件冒泡 --> <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> <!-- click 事件只能點擊一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>

二、按鍵修飾符

<!-- 只有在 keyCode 是 13 時調用 vm.submit() --> <input v-on:keyup.13="submit">

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

所有的按鍵別名：

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

lazy：在改變後才觸發（也就是說只有光標離開input輸入框的時候值纔會改變）

<input v-model.lazy="msg" >

 

number：將輸出字符串轉爲Number類型·（雖然type類型定義了是number類型，可是若是輸入字符串，輸出的是string）

<input v-model.number="age" type="number">

 

trim：自動過濾用戶輸入的首尾空格

<input v-model.lazy.trim="msg" >