在事件處理程式中呼叫event.preventDefault() 或 event.stopPropagation()是非常常見的需求。儘管我們可以在methods 中輕鬆實現這點，但更好的方式是：methods 只有純粹的資料邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題， Vue.js 為 v-on

提供了 事件修飾符。通過由點(.)表示的指令字尾來呼叫修飾符。修飾符（Modifiers）是以半形句號 . 指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫event.preventDefault()：

下面是常用的一些

<form v-on:submit.prevent="onSubmit"></form>

<!-- 阻止單擊事件冒泡 -->

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