在事件處理程序中調(diào)用
event.preventDefault() 或 event.stopPropagation()
是非常常見的需求。盡管我們可以在 methods 中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：methods 只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。
為了解決這個問題， Vue.js 為 v-on
提供了 事件修飾符。通過由點(diǎn)(.)表示的指令后綴來調(diào)用修飾符。

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

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

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

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

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

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

<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>