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>

原文地址：https://segmentfault.com/a/1190000016689265