Vue快速理解事件繫結是什麼

2022-08-27 22:00:14

一、監聽事件

監聽事件一般使用的是v-on指令，可以在JavaScript程式碼中將v-on直接將寫在程式碼上面，語法是：v-on:你所定的事件名=‘程式碼’，v-on指令可以接收到函數的呼叫，並且將其分成是無引數呼叫函數還是有引數呼叫函數。當然v-on函數可以簡寫成@+事件名的寫法，很方便。

在初始化vue物件的時候要申明事件呼叫的函數，初始化物件的時候，在傳遞的物件引數中加入一個methods屬性，這樣才可以在methods屬性申明的事件呼叫函數。

v-on指令是可以起到繫結元素所有的事件的作用，而且每一個函數都有對應的事件，只要通過v-on對時間進行繫結才能進行函數的監聽事件。我們可以通過以下的程式碼範例進行這個監聽事件的理解：

程式碼範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>資料雙向繫結</title>
</head>
<body>
    <div id="app">
<button v-on:click="count+=1">加1次</button>
<button v-on:click="add">+1</button>
<p >按鈕點選了{{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>

執行結果：

這裡當v-on：click點選事件如果呼叫的函數沒有引數，那麼函數的名後面可以不用（），就像v-on:click:add;如果在定義的時候申名是有引數的，那麼這個程式碼執行中的add：function（e）{},就會呼叫預設的傳入原生事件物件event，所以在單擊第二個按鈕的時候，控制檯就會輸出事件的物件。

二、事件修飾符

在時間處理程式碼程式中呼叫的event.preventDefault()是很常用的，vue專案中這個呼叫的方法只是起到了簡單的資料邏輯卻不能處理DOM事件的細節，所以v-on這個指令提供了事件修飾符，用來點開通的指令字尾來表示。

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

什麼是時間冒泡？事件冒泡指的是當一個事件開始的時候一般都是由檔案羨慕巢狀層次最深的那個節點開始接收的，然後像冒泡一樣逐級向上傳播。

範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>資料雙向繫結</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>

執行結果：

當<div @click="func($event)">呼叫事件處理常式傳入引數到$event裡面，在事件處理常式中，引數獲取到事件物件，而事件物件的target屬性獲取到觸發這個屬性的元素。通過點選按鈕，時間都冒泡到父節點<div>上面，觸發這個節點的事件。

2、capture修飾符

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

程式碼範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>資料雙向繫結</title>
</head>
<body>
    <div id="app">
<div @click.capture="box" :style="{border:'solid 2px black'}">
    <a href="http://www.taobao.com" 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>

執行結果：

當單擊淘寶連結的時候，先彈出div框架，因為繫結的div上面的單擊事件得到觸發，box裡面的函數得到執行；確定“div”的對話方塊後再彈出內容是“http：//www.taobao.com”的對話方塊，繫結在a標籤的單擊事件得到觸發，links函數得到執行。

內部元素a觸發的事件先在父級元素得到處理，然後才交給內部的元素a進行處理，因為父級元素div繫結了click單擊事件，所以增加了事件修飾符capture。

3、self修飾符

這個修飾符只是用來接收自己觸發的事件函數，只有繫結這個事件的元素觸發事件的時候，才會觸事件的處理常式，而且這個事件不會被冒泡或者被捕獲。我們通過範例程式碼瞭解一下：

範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>資料雙向繫結</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>

執行結果：

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

4、prevent修飾符

這個修飾符主要用來阻止預設事件。

範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>資料雙向繫結</title>
</head>
<body>
    <div id="app">
<a href="http://www.taobao.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="func">開始可以存取到淘寶網</a>
<a href="http://www.taobao.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="func">不可以存取到淘寶網</a>
<a href="http://www.taobao.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent.once="func">首次不可以存取到淘寶網</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('淘寶網！！！')
}
    }
})
    </script>
</body>
</html>

執行結果：

我們看到點選第一個連結的時候，就可以彈出對話方塊，只要確定，就可以跳轉到淘寶網，因為單擊事件和超連結時間單擊跳轉時間都已經被執行！

點選第二個長連結的時候，只是彈出了對話方塊，但是沒有跳轉到淘寶網，每一次點選都一樣，因為在程式中已經給到click的單擊事件增加了一個prevent事件修飾符，阻止了超連結的預設單擊跳轉事件；

點選第三個超連結的時候，在第一次的時候，只是彈出了對話方塊，沒有跳轉到淘寶，而第二次點選的時候，就可以跳轉到淘寶網了，因為第三個連結新增了.once，事件只能發生一次觸發事件。

5、鍵盤事件修飾符

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

程式碼範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>資料雙向繫結</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>

執行結果：

我們可以看到，第一個框輸入數位，每一個字元都可以觸發keyup事件；第二個框的時候，輸入字元不能觸發keyup事件，只有按下確認鍵的時候才能被觸發，函數才能被執行！

6、滑鼠事件修飾符

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

範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>資料雙向繫結</title>
</head>
<body>
    <div id="app">
<button @click.left.prevent="func">左鍵觸發</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('左鍵觸發！');
}
    }
})
    </script>
</body>
</html>

執行結果：