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 只當點擊鼠標中鍵時觸發