Vue事件修飾符如何使用

這篇文章主要介紹了Vue事件修飾符如何使用的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue事件修飾符如何使用文章都會有所收獲，下面我們一起來看看吧。

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

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

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

<div id="app">
    <a href="https://www.baidu.com" 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 href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click="handleClick">百度</a>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick(e) {
                    e.preventDefault();
                }
            }
        })
    </script>

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

2 .stop阻止事件冒泡

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

    <div id="app">
        <div @click="handleClick">
            <button @click.stop="handleClick">點擊提示</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">點擊提示</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ā)事件事，該事件會失效。

例如，頁面上有一個按鈕，每次點擊按鈕都會彈窗提示

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

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

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

4 .capture使用事件捕獲模式

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

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

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

    <div id="app">
        <div @click.capture="handleClick1">
            <button @click="handleClick2">點擊</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ā)事件

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

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

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

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

在上面的代碼中，點擊按鈕后只觸發(fā)了一次handleClick()事件，這是因為外面的div并不是當(dāng)前的e.target，因此不會觸發(fā)handleClick()事件。

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

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

7 .鍵盤事件

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

示例：按下backspace或者delete鍵時輸出輸入框中的內(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>

但是如果我們想為除了上面的鍵之外的鍵綁定事件，這時就可以使用按鍵原始的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ù)字，不過該方式并不推薦，因為不同的鍵盤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，因此在為它綁定事件時，必須將組成它的兩個單詞小寫，并且使用“-”將他們連接，也就是說，它使用caps-lock來綁定事件

• ctrl、alt、shift、meta鍵是系統(tǒng)修飾鍵，如果為它們綁定keyup事件不會立即起作用，它們起作用的方式為：按下系統(tǒng)修飾鍵——>按下其他鍵——>釋放其他鍵，這樣事件才會被觸發(fā)

關(guān)于“Vue事件修飾符如何使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue事件修飾符如何使用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。