Vue事件修飾符使用詳細(xì)介紹

更新時(shí)間：2022年10月19日 17:12:31 作者：橘貓吃不胖～

在Vue中，修飾符處理了許多DOM事件的細(xì)節(jié)，讓我們不再需要花大量的時(shí)間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理

1 .prevent阻止默認(rèn)事件

.prevent可以阻止默認(rèn)事件的發(fā)生。

例如，阻止a標(biāo)簽的跳轉(zhuǎn)

<div id="app">
    <a  rel="external nofollow"  rel="external nofollow"  @click.prevent>百度</a>
</div>
<script>
    var vm = new Vue({
        el: "#app"
    })
</script>

除此之外，還有一種方式是使用之前的e.preventDefault()來阻止默認(rèn)行為，代碼如下：

    <div id="app">
        <a  rel="external nofollow"  rel="external nofollow"  @click="handleClick">百度</a>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick(e) {
                    e.preventDefault();
                }
            }
        })
    </script>

這時(shí)點(diǎn)擊頁面上的標(biāo)簽則不會(huì)進(jìn)行頁面的跳轉(zhuǎn)。

2 .stop阻止事件冒泡

DOM有事件冒泡的特點(diǎn)，使用.stop可以阻止事件冒泡，代碼如下：

    <div id="app">
        <div @click="handleClick">
            <button @click.stop="handleClick">點(diǎn)擊提示</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick(e) {
                    console.log("事件觸發(fā)");
                }
            }
        })
    </script>

或者使用e.stopPropagation()也可以阻止事件冒泡，代碼如下：

    <div id="app">
        <div @click="handleClick">
            <button @click="handleClick">點(diǎn)擊提示</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick(e) {
                    e.stopPropagation(); // 阻止事件冒泡
                    console.log("事件觸發(fā)");
                }
            }
        })
    </script>

3 .once事件只觸發(fā)一次

.once可以讓事件只觸發(fā)一次，當(dāng)再次觸發(fā)事件事，該事件會(huì)失效。

例如，頁面上有一個(gè)按鈕，每次點(diǎn)擊按鈕都會(huì)彈窗提示

    <div id="app">
        <button @click="handleClick">點(diǎn)擊</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick() {
                    alert("點(diǎn)擊事件");
                }
            }
        })
    </script>

如果為click事件加上事件修飾符.once，那么該彈窗只會(huì)出現(xiàn)一次，再次點(diǎn)擊按鈕則不會(huì)彈窗，示例代碼如下：

    <div id="app">
        <button @click.once="handleClick">點(diǎn)擊</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick() {
                    alert("點(diǎn)擊事件");
                }
            }
        })
    </script>

4 .capture使用事件捕獲模式

在DOM事件流中，我們都知道DOM事件會(huì)先捕獲然后冒泡，在冒泡階段才會(huì)處理事件，因此在下面的示例中，點(diǎn)擊按鈕，會(huì)先觸發(fā)handleClick2()輸出2，然后觸發(fā)handleClick1()輸出1，代碼如下：

    <div id="app">
        <div @click="handleClick1">
            <button @click="handleClick2">點(diǎn)擊</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick1() {
                    console.log(1);
                },
                handleClick2() {
                    console.log(2);
                }
            }
        })
    </script>

但是如果我們想在事件捕獲時(shí)就處理事件，可以使用.capture來處理，這樣點(diǎn)擊按鈕時(shí)，會(huì)先觸發(fā)handleClick1()輸出1，然后觸發(fā)handleClick2()輸出2，示例代碼如下：

    <div id="app">
        <div @click.capture="handleClick1">
            <button @click="handleClick2">點(diǎn)擊</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick1() {
                    console.log(1);
                },
                handleClick2() {
                    console.log(2);
                }
            }
        })
    </script>

5 .self當(dāng)e.target是當(dāng)前操作的元素才觸發(fā)事件

在冒泡或者捕獲時(shí)，e.target會(huì)指向觸發(fā)事件的對象。例如，在下面代碼中，點(diǎn)擊按鈕，雖然由于事件冒泡會(huì)將上面div的事件也進(jìn)行觸發(fā)，但是它們的e.target都是觸發(fā)事件的按鈕。

    <div id="app">
        <div @click="handleClick">
            <button @click="handleClick">點(diǎn)擊</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick(e) {
                    console.log(e.target);
                }
            }
        })
    </script>

當(dāng)使用.self來修飾時(shí)，那么只有當(dāng)觸發(fā)事件的對象和當(dāng)前操作的元素一致時(shí)，才會(huì)觸發(fā)事件，代碼如下：

    <div id="app">
        <div @click.self="handleClick">
            <button @click="handleClick">點(diǎn)擊</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick(e) {
                    console.log(e.target);
                }
            }
        })
    </script>

在上面的代碼中，點(diǎn)擊按鈕后只觸發(fā)了一次handleClick()事件，這是因?yàn)橥饷娴膁iv并不是當(dāng)前的e.target，因此不會(huì)觸發(fā)handleClick()事件。

6 .passive事件的默認(rèn)行為立即執(zhí)行

.passive可以讓事件的默認(rèn)行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢，一般在移動(dòng)端會(huì)使用多一些。

7 .鍵盤事件

Vue為我們提供了常用的鍵盤事件，具體如下：

修飾符	鍵盤事件
.enter	按下回車鍵后觸發(fā)
.delete	按下backspace或者delete鍵觸發(fā)
.esc	按下esc鍵后觸發(fā)
.space	按下空格鍵后觸發(fā)
.up	按下上鍵后觸發(fā)
.down	按下下鍵后觸發(fā)
.left	按下左鍵后觸發(fā)
.right	按下右鍵后觸發(fā)
.tab	按下tab鍵觸發(fā)，該按鍵配合keydown事件使用，否則會(huì)切走焦點(diǎn)

示例：按下backspace或者delete鍵時(shí)輸出輸入框中的內(nèi)容

    <div id="app">
        <input type="text" @keyup.delete="demo">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                demo(e) {
                    console.log(e.target.value);
                }
            }
        })
    </script>

但是如果我們想為除了上面的鍵之外的鍵綁定事件，這時(shí)就可以使用按鍵原始的key值（注意不是keyCode）去綁定事件。鍵的key值可以通過e.key來獲取到，比如說獲取q鍵的key值，代碼如下：

    <div id="app">
        <input type="text" @keyup="getQ">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                getQ(e) {
                    console.log(e.key); // 輸出key值
                    console.log(e.keyCode); // 輸出keyCode
                }
            }
        })
    </script>

可以看到q的key值是q，keyCode是81，我們使用q可以為該鍵綁定事件，代碼如下：

    <div id="app">
        <input type="text" @keyup.q="qClick">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                qClick() {
                    console.log("按下了q鍵");
                }
            }
        })
    </script>

除了以上兩種方式外，還有兩種方式可以為鍵盤綁定事件：

（1）使用keyCode綁定事件，例如回車鍵的keyCode為13，按下回車鍵輸出輸入框中數(shù)字，不過該方式并不推薦，因?yàn)椴煌逆I盤keyCode可能不同，示例代碼如下：

    <div id="app">
        <input type="text" @keydown.13="demo">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                demo(e) {
                    console.log(e.target.value);
                }
            }
        })
    </script>

（2）使用定制按鍵別名的方式綁定事件，語法如下：

Vue.config.keyCodes.自定義鍵名 = 鍵碼;

為回車鍵綁定事件，示例代碼如下：

    <div id="app">
        <input type="text" @keyup.huiche="demo">
    </div>
    <script>
        Vue.config.keyCodes.huiche = 13; // 綁定回車事件
        var vm = new Vue({
            el: "#app",
            methods: {
                demo(e) {
                    console.log(e.target.value);
                }
            }
        })
    </script>

注意：

對于大寫鎖定鍵來說，它的key值是CapsLock，因此在為它綁定事件時(shí)，必須將組成它的兩個(gè)單詞小寫，并且使用“-”將他們連接，也就是說，它使用caps-lock來綁定事件
ctrl、alt、shift、meta鍵是系統(tǒng)修飾鍵，如果為它們綁定keyup事件不會(huì)立即起作用，它們起作用的方式為：按下系統(tǒng)修飾鍵——>按下其他鍵——>釋放其他鍵，這樣事件才會(huì)被觸發(fā)

到此這篇關(guān)于Vue事件修飾符使用詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Vue事件修飾符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: