在事件處理器中經常需要呼叫event.preventDefault()或event.stopPropagation()。

為了解決這個問題，Vue.js 為v-on提供兩個事件修飾符：.prevent與.stop。

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

 

<!-- 新增事件偵聽器時使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回撥 -->
<div v-on:click.self="doThat">...</div>