Vue—事件修飾符

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>