Vue學習筆記 - v-on修飾符

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
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!