如何實(shí)現vuejs事件監聽(tīng)

這篇文章主要介紹如何實(shí)現vuejs事件監聽(tīng)，文中介紹的非常詳細，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在vuejs中，可以使用“v-on”指令來(lái)實(shí)現事件監聽(tīng)，該指令用來(lái)綁定事件監聽(tīng)器；只需要在標簽模板中添加“v-on:事件參數="事件處理函數"”語(yǔ)句，使用JavaScript設置觸發(fā)時(shí)需要執行的代碼即可。

本教程操作環(huán)境：windows7系統、vue2.9.6版，DELL G3電腦。

當模板渲染完成之后，就可以進(jìn)行事件的綁定與監聽(tīng)。v-on指令用來(lái)監聽(tīng)DOM事件，通常在模板內直接使用。

<button v-on:click="say">Say</button>

方法及內聯(lián)語(yǔ)句處理器

通過(guò)v-on綁定實(shí)力選項屬性methods中的方法作為事件的處理器，v-on：后參數接受所有的原生事件名稱(chēng)。

    <button v-on:click = "say">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            say:function(){
                alert(this.msg);
            }
        }
    })

v-on縮寫(xiě)形式：@。@click="say"

v-on支持內聯(lián)JavaScript語(yǔ)句，但僅限是一個(gè)語(yǔ)句。

    <button v-on:click = "sayFrom('from param')">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            sayFrom:function(from){
                alert(this.msg + '' + from);
            }
        }
    })

在直接綁定methods函數和內聯(lián)JavaScript與居室，都有可能需要獲取原生DOM事件對象

   <button v-on:click = "showEvent">Event</button> 
   <button v-on:click = "showEvent($event)">event</button>
   <button v-on:click = "showEvent()">Say</button>  //這樣寫(xiě)獲取不到event
    var vm = new Vue({
        el: "#app",
        methods:{
            showEvent:function(event){
                console.log(event);
            }
        }
    })

同一個(gè)元素上可以通過(guò)v-on綁定多個(gè)相同事件函數，執行順序為順序執行。

事件修飾符

1、.stop:調用event.stopPropagation().

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>

2、.prevent:調用event.preventDefault().

    <!-- 提交事件不再重載頁(yè)面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修飾符可以串聯(lián)  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修飾符 -->
    <form v-on:submit.prevent></form>

3、.caputure:使用capture模式添加事件監聽(tīng)器。

  <!-- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式 -->
    <div v-on:click.capture="doThis">...</div>

4、.self:只當事件是從監聽(tīng)元素本身觸發(fā)時(shí)才觸發(fā)調回。

   <!-- 只當事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調 -->
    <div v-on:click.self="doThat">...</div>

5、.once:

 <!-- 點(diǎn)擊事件將只會(huì )觸發(fā)一次 -->
    <a v-on:click.once="doThis"></a>

使用修飾符時(shí)，順序很重要；相應的代碼會(huì )以同樣的順序產(chǎn)生。因此，用 @click.prevent.self 會(huì )阻止所有的點(diǎn)擊，而 @click.self.prevent 只會(huì )阻止元素上的點(diǎn)擊。

   //例子
    var vm = new Vue({
        el: '#app',
        methods:{
            saySelf(msg) {
                alert(msg);
            }
        }
    });
    //HTML代碼
    <div v-on:click="say('click from inner')" v-on:click.self="saySelf('click from self')">
        <button v-on:click="saySelf('button click')">button</button>
        <button v-on:click.stop="saySelf('just button click')">button</button>
    </div>

鍵值修飾符

在監聽(tīng)鍵盤(pán)事件時(shí)，需要監測常見(jiàn)的鍵值。

    <input v-on:keyup.13 = "submit" />  //監聽(tīng)input的輸入，當輸入回車(chē)時(shí)觸發(fā)submit函數。

記住所有的keyCide比較困難，所以Vue為最常用的按鍵提供了別名。

    <!-- 同上 -->
    <input v-on:keyup.enter="submit">
    <!-- 縮寫(xiě)語(yǔ)法 -->
    <input @keyup.enter="submit">

.enter
.tab
.delete(捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
可以通過(guò)全局config.keyCodes對象自定義鍵值修飾符別名：

    // 可以使用 v-on:keyup.f1
    Vue.config.keyCodes.f1 = 112

與傳統事件綁定的區別

1.無(wú)需手動(dòng)管理事件。ViewModel被銷(xiāo)毀時(shí)，所有的事件處理器都會(huì )自動(dòng)被刪除，讓我們從獲取DOM綁定事件然后在特定情況下再解綁這樣的事情中解脫出來(lái)。

2.解耦。ViewModel代碼是純粹的邏輯代碼，和DOM無(wú)關(guān)，有利于我們寫(xiě)自動(dòng)化測試用例。

vue.extend()

為了重復使用的子組件，vue.js提供了Vue.extend(options)方法，創(chuàng )建基礎Vue構造器的“子類(lèi)”，參數options對象和直接聲明Vue實(shí)例參數對象基本一致。

    var Child = Vue.extend({
        teplate:'#child', //不同的是，el和data選項需要通過(guò)函數返回值賦值，避免多個(gè)組件實(shí)例共用一個(gè)數據
        data:function(){
            return {
                ...
            }
        },
        ...
    })
    Vue.component('child',child)  //全局注冊子組件
    <child ...></child>  //子組件在其他組件內的調用方式