`v-on`修飾符筆記

修飾符是用點表示的指令後綴

事件修飾符

用法:

<a @click.stop="doThis"></a>

<form @submit.prevent="onSubmit"></form>

修飾符	說明
.stop	調用 event.stopPropagation()，阻止冒泡
.prevent	調用 event.preventDefault()，阻止瀏覽器預設行為
.self	只當事件是從偵聽器綁定的元素本身觸發時才觸發回調
.capture	添加事件偵聽器時使用 capture 模式，打破由內而外事件傳遞，先行執行
.once	只觸發一次回調
.passive	無視 prevent 功能，不要與 prevent 一起使用

key 修飾符

監聽使用者輸入按鍵觸發事件。

範例:

<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />

修飾符	說明
.enter	點擊 enter 鍵
.tab	點擊 tab 鍵
.delete	點擊 delete 鍵
.space	點擊 space 鍵
.up	點擊 up 鍵
.down	點擊 down 鍵
.left	點擊 left 鍵
.right	點擊 right 鍵

系統修改鍵

系統修改鍵與常規鍵不同，當與keyup事件一起使用時，先釋放系統修改鍵不會觸發事件，必須按著系統修改鍵式法常規鍵，才會觸發事件。

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

修飾符	說明
.ctrl	點擊 ctrl 鍵
.alt	點擊 alt 鍵
.shift	點擊 shift 鍵
.meta	點擊 meta 鍵

.exact 修飾符

.exact修飾符可以控制觸發事件所需系統修改器的精確組合

<!-- 同時按下ctrl家紹其他系統鍵也可以觸發 -->
<button @click.ctrl="onClick">A</button>

<!-- 只有點選ctrl(沒有按其他系統修改鍵)才會觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 在沒有按下其他系統修改鍵時觸發 -->
<button @click.exact="onClick">A</button>

鼠標按鈕修飾符

滑鼠點擊觸發事件

<!-- 點擊滑鼠右鍵 -->
<button @click.right="onClick">A</button>

修飾符	說明
.left	只當點擊鼠標左鍵時觸發
.right	只當點擊鼠標右鍵時觸發
.middle	只當點擊鼠標中鍵時觸發

Vue Event Modifiers

https://vuejs.org/guide/essentials/event-handling.html#event-modifiers

v-on修飾符筆記