方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節，爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。修飾符是由點開頭的指令後綴來表示的。
.stop 阻止事件繼續傳播.prevent 阻止標籤的默認事件發生.capture.self.once 事件只會發生一次.passive
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用
v-on:click.prevent.self會阻止所有的點擊，而v-on:click.self.prevent只會阻止對元素自身的點擊。
上圖中的.once 事件中，頁面結果就是點一次漲一歲後再點擊就沒有用了；
.stop 事件中，當鼠標移動到“停止移動”處時左邊位置就不再變化了；
.prevent 事件中，當我們點擊a標籤後，只能執行alert方法輸出hello world，不能跳轉到百度了；
按鍵的事件修飾符：
在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：
意思就是隻有在按下enter鍵之後才能觸發後面的方法
<!-- 只有在 `key` 是 `Enter` 時調用方法 -->
<input v-on:keyup.enter="submit">
<!-- 只有按下alt和enter鍵後調用方法 -->
<input v-on:keyup.alt.enter="submit">