cq9电子游戏越来越难赢

書名： 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

官术网_书友最值得收藏!

Vue.js從入門到項目實踐（超值版）

5.2.2 修飾符

1．事件修飾符

2．鍵值修飾符

5.2.2　修飾符