- Vue.js從入門到項目實踐（超值版）
- 聚慕課教育研發中心編著
- 523字
- 2022-07-29 14:27:47
5.2.2 修飾符
修飾符分為兩種：一種為事件修飾符；另一種為鍵值修飾符。下面將會介紹這兩種修飾符的作用。
1．事件修飾符
事件修飾符：在事件處理程序中調用event.preventDefault()或event.stopPropagation()，是非常常見的需求。盡管可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理DOM事件細節。
（1）.stop：調用event.stopPropagation()。阻止單擊事件繼續傳播，代碼如下：
<a v-on:click.stop="vue"></a>
（2）.prevent：調用event.preventDefault()。
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="Submit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
（3）.caputure：使用capture模式添加事件監聽器。添加事件監聽器時使用事件捕獲模式，即元素自身觸發的事件先在此處理，然后才交由內部元素進行處理。
<div v-on:click.capture="vue">…</div>
（4）.self：只當事件是從監聽元素本身觸發時才觸發調回，即事件不是從內部元素觸發的。
<div v-on:click.self="vue">…</div>
（5）.once：單擊事件將只會觸發一次。
<a v-on:click.once="vue"></a>
（6）.passive：滾動事件的默認行為（即滾動行為）將會立即觸發，而不會等待onScroll完成，這其中包含event.preventDefault()的情況。
<div v-on:scroll.passive="onScroll">…</div>
使用修飾符時，順序很重要，相應的代碼會以同樣的順序產生。因此，用@click.prevent.self會阻止所有的單擊，而@click.self.prevent只會阻止元素上的單擊。
2．鍵值修飾符
在監聽鍵盤事件時，我們經常需要檢測keyCode。Vue.js允許為v-on添加按鍵修飾符。
<!-- 只有在keyCode為20時調用 vm.submit() -->
<input v-on:keyup.20="submit">
記住所有的keyCode比較困難，Vue.js為最常用的按鍵提供了別名。
<!-- 只有在keyCode為vue時調用 vm.submit() -->
<input v-on:keyup.vue="submit">
<!-- 縮寫語法 -->
<input @keyup.vue="submit">
全部的按鍵別名有如下幾個。
.enter
.tab
.delete(捕獲"刪除"和"退格"鍵)
.esc
.space
.down
.up
.left
.right
在Vue中，可以通過全局config.keyCodes對象自定義鍵值修飾符別名。
//可以使用 v-on:keyup.
Vue.config.keyCodes.vue = hello