Vue快速理解事件綁定是什么

更新時間：2022年08月27日 16:11:53 作者：丘比特懲罰陸

一般在vue項目開發(fā)中，事件的處理邏輯一般很復(fù)雜，我們可以將處理的邏輯變成函數(shù)，在vue開發(fā)中，一般使用的是使用的是v-on指令進(jìn)行事件的監(jiān)聽，事件監(jiān)聽的過程中觸發(fā)相應(yīng)的JavaScript代碼

一、監(jiān)聽事件

監(jiān)聽事件一般使用的是v-on指令，可以在JavaScript代碼中將v-on直接將寫在代碼上面，語法是：v-on:你所定的事件名=‘代碼’，v-on指令可以接收到函數(shù)的調(diào)用，并且將其分成是無參數(shù)調(diào)用函數(shù)還是有參數(shù)調(diào)用函數(shù)。當(dāng)然v-on函數(shù)可以簡寫成@+事件名的寫法，很方便。

在初始化vue對象的時候要申明事件調(diào)用的函數(shù)，初始化對象的時候，在傳遞的對象參數(shù)中加入一個methods屬性，這樣才可以在methods屬性申明的事件調(diào)用函數(shù)。

v-on指令是可以起到綁定元素所有的事件的作用，而且每一個函數(shù)都有對應(yīng)的事件，只要通過v-on對時間進(jìn)行綁定才能進(jìn)行函數(shù)的監(jiān)聽事件。我們可以通過以下的代碼實例進(jìn)行這個監(jiān)聽事件的理解：

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</title>
</head>
<body>
    <div id="app">
<button v-on:click="count+=1">加1次</button>
<button v-on:click="add">+1</button>
<p >按鈕點擊了{(lán){count}}次！</p>
<button v-on:click="click('請罰陸')">點擊</button>
<p>丘比特 {{message}}!</p>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var m = {
    val1:1,
    val2:2,
    val3:''
};
var vm = new Vue({
    el:'#app',
    data:{
        count:0,
        message:'()'
    },
    methods:{
        add:function(e){
            this.count++;
            console.log(e);
        },
        click(name){
            this.message=name;
        }
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

這里當(dāng)v-on：click點擊事件如果調(diào)用的函數(shù)沒有參數(shù)，那么函數(shù)的名后面可以不用（），就像v-on:click:add;如果在定義的時候申名是有參數(shù)的，那么這個代碼運(yùn)行中的add：function（e）{},就會調(diào)用默認(rèn)的傳入原生事件對象event，所以在單擊第二個按鈕的時候，控制臺就會輸出事件的對象。

二、事件修飾符

在時間處理代碼程序中調(diào)用的event.preventDefault()是很常用的，vue項目中這個調(diào)用的方法只是起到了簡單的數(shù)據(jù)邏輯卻不能處理DOM事件的細(xì)節(jié)，所以v-on這個指令提供了事件修飾符，用來點開通的指令后綴來表示。

1、stop修飾符阻止事件冒泡

什么是時間冒泡？事件冒泡指的是當(dāng)一個事件開始的時候一般都是由文檔羨慕嵌套層次最深的那個節(jié)點開始接收的，然后像冒泡一樣逐級向上傳播。

實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</title>
</head>
<body>
    <div id="app">
<div @click="func($event)">
    <input type="button" value="按鍵1">
    <input type="button" value="按鍵2">
    <input type="button" value="按鍵3">
</div>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    methods:{
func:function(event){
    console.log(event.target);
    console.log('冒泡了。。。。')
}
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

當(dāng)<div @click="func($event)">調(diào)用事件處理函數(shù)傳入?yún)?shù)到$event里面，在事件處理函數(shù)中，參數(shù)獲取到事件對象，而事件對象的target屬性獲取到觸發(fā)這個屬性的元素。通過點擊按鈕，時間都冒泡到父節(jié)點<div>上面，觸發(fā)這個節(jié)點的事件。

2、capture修飾符

這個修飾符所修飾的事件流是捕獲事件流，這個DOM事件流分成冒泡事件流和捕獲事件流兩個事件，而我們現(xiàn)在講的capture所修飾的事件流就是捕獲事件流。我們還是通過一段程序來理解：

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</title>
</head>
<body>
    <div id="app">
<div @click.capture="box" :style="{border:'solid 2px black'}">
    <a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" @click.stop.prevent="links">淘寶</a>
</div>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var app = new Vue({
    el:'#app',
    methods:{
box(){
    alert('div盒子');
},
links(){
    alert('http://www.淘寶.com');
}
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

當(dāng)單擊淘寶鏈接的時候，先彈出div框架，因為綁定的div上面的單擊事件得到觸發(fā)，box里面的函數(shù)得到執(zhí)行；確定“div”的對話框后再彈出內(nèi)容是“http：//www.taobao.com”的對話框，綁定在a標(biāo)簽的單擊事件得到觸發(fā)，links函數(shù)得到執(zhí)行。

內(nèi)部元素a觸發(fā)的事件先在父級元素得到處理，然后才交給內(nèi)部的元素a進(jìn)行處理，因為父級元素div綁定了click單擊事件，所以增加了事件修飾符capture。

3、self修飾符

這個修飾符只是用來接收自己觸發(fā)的事件函數(shù)，只有綁定這個事件的元素觸發(fā)事件的時候，才會觸事件的處理函數(shù)，而且這個事件不會被冒泡或者被捕獲。我們通過實例代碼了解一下：

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</title>
</head>
<body>
    <div id="app">
<div @click.self="box()" id="box">
<input type="button" value="按鍵"@click="btn()">
</div>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    methods:{
box(){
console.log("div");
},
btn(){
    console.log("button");
}
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

我們可以看到通過單擊只會出現(xiàn)“button”，按鍵的單擊事件觸發(fā)，div沒有接收到冒泡，div上面的單擊事件沒有被觸發(fā)。通過單擊div，只能輸出“div”div的單擊事件被觸發(fā)，但是按鍵的單擊事件沒有被觸發(fā)。

4、prevent修飾符

這個修飾符主要用來阻止默認(rèn)事件。

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</title>
</head>
<body>
    <div id="app">
<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="func">開始可以訪問到淘寶網(wǎng)</a>
<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="func">不可以訪問到淘寶網(wǎng)</a>
<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent.once="func">首次不可以訪問到淘寶網(wǎng)</a>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    methods:{
func:function(){
    alert('淘寶網(wǎng)?。?！')
}
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

我們看到點擊第一個鏈接的時候，就可以彈出對話框，只要確定，就可以跳轉(zhuǎn)到淘寶網(wǎng)，因為單擊事件和超鏈接時間單擊跳轉(zhuǎn)時間都已經(jīng)被執(zhí)行！

點擊第二個長鏈接的時候，只是彈出了對話框，但是沒有跳轉(zhuǎn)到淘寶網(wǎng)，每一次點擊都一樣，因為在程序中已經(jīng)給到click的單擊事件增加了一個prevent事件修飾符，阻止了超鏈接的默認(rèn)單擊跳轉(zhuǎn)事件；

點擊第三個超鏈接的時候，在第一次的時候，只是彈出了對話框，沒有跳轉(zhuǎn)到淘寶，而第二次點擊的時候，就可以跳轉(zhuǎn)到淘寶網(wǎng)了，因為第三個鏈接添加了.once，事件只能發(fā)生一次觸發(fā)事件。

5、鍵盤事件修飾符

鍵盤修飾符可以使用鍵碼，也可以使用鍵字符，方向鍵的上下左右用.up、.down、.left、.right;delete鍵用于捕獲“刪除”和“退格”鍵等等。

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</title>
</head>
<body>
    <div id="app">
<input type="text" @keyup="func ">
<input type="text" @keyup.enter="func">
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    methods:{
func:function(){
console.log('按鍵按下了！')
}
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

我們可以看到，第一個框輸入數(shù)字，每一個字符都可以觸發(fā)keyup事件；第二個框的時候，輸入字符不能觸發(fā)keyup事件，只有按下回車鍵的時候才能被觸發(fā)，函數(shù)才能被執(zhí)行！

6、鼠標(biāo)事件修飾符

鼠標(biāo)事件修飾符的時候，鼠標(biāo)的左中右三個鍵分別是.left、.middle、.right,這個時間修飾符很簡單，我們直接通過代碼程序來說明。

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</title>
</head>
<body>
    <div id="app">
<button @click.left.prevent="func">左鍵觸發(fā)</button>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    methods:{
func(){
alert('左鍵觸發(fā)！');
}
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：