Vue快速理解事件綁定是什么
一、監(jiān)聽(tīng)事件
監(jiān)聽(tīng)事件一般使用的是v-on指令，可以在JavaScript代碼中將v-on直接將寫(xiě)在代碼上面，語(yǔ)法是：v-on:你所定的事件名=‘代碼’，v-on指令可以接收到函數(shù)的調(diào)用，并且將其分成是無(wú)參數(shù)調(diào)用函數(shù)還是有參數(shù)調(diào)用函數(shù)。當(dāng)然v-on函數(shù)可以簡(jiǎn)寫(xiě)成@+事件名的寫(xiě)法，很方便。
在初始化vue對(duì)象的時(shí)候要申明事件調(diào)用的函數(shù)，初始化對(duì)象的時(shí)候，在傳遞的對(duì)象參數(shù)中加入一個(gè)methods屬性，這樣才可以在methods屬性申明的事件調(diào)用函數(shù)。
v-on指令是可以起到綁定元素所有的事件的作用，而且每一個(gè)函數(shù)都有對(duì)應(yīng)的事件，只要通過(guò)v-on對(duì)時(shí)間進(jìn)行綁定才能進(jìn)行函數(shù)的監(jiān)聽(tīng)事件。我們可以通過(guò)以下的代碼實(shí)例進(jìn)行這個(gè)監(jiān)聽(tīng)事件的理解：
代碼實(shí)例：
<!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 >按鈕點(diǎn)擊了{(lán){count}}次！</p>
<button v-on:click="click('請(qǐng)罰陸')">點(diǎn)擊</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ǎn)擊事件如果調(diào)用的函數(shù)沒(méi)有參數(shù)，那么函數(shù)的名后面可以不用（），就像v-on:click:add;如果在定義的時(shí)候申名是有參數(shù)的，那么這個(gè)代碼運(yùn)行中的add：function（e）{},就會(huì)調(diào)用默認(rèn)的傳入原生事件對(duì)象event，所以在單擊第二個(gè)按鈕的時(shí)候，控制臺(tái)就會(huì)輸出事件的對(duì)象。
二、事件修飾符
在時(shí)間處理代碼程序中調(diào)用的event.preventDefault()是很常用的，vue項(xiàng)目中這個(gè)調(diào)用的方法只是起到了簡(jiǎn)單的數(shù)據(jù)邏輯卻不能處理DOM事件的細(xì)節(jié)，所以v-on這個(gè)指令提供了事件修飾符，用來(lái)點(diǎn)開(kāi)通的指令后綴來(lái)表示。
1、stop修飾符阻止事件冒泡
什么是時(shí)間冒泡？事件冒泡指的是當(dāng)一個(gè)事件開(kāi)始的時(shí)候一般都是由文檔羨慕嵌套層次最深的那個(gè)節(jié)點(diǎn)開(kāi)始接收的，然后像冒泡一樣逐級(jí)向上傳播。
實(shí)例：
<!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ù)獲取到事件對(duì)象，而事件對(duì)象的target屬性獲取到觸發(fā)這個(gè)屬性的元素。通過(guò)點(diǎn)擊按鈕，時(shí)間都冒泡到父節(jié)點(diǎn)<div>上面，觸發(fā)這個(gè)節(jié)點(diǎn)的事件。
2、capture修飾符
這個(gè)修飾符所修飾的事件流是捕獲事件流，這個(gè)DOM事件流分成冒泡事件流和捕獲事件流兩個(gè)事件，而我們現(xiàn)在講的capture所修飾的事件流就是捕獲事件流。我們還是通過(guò)一段程序來(lái)理解：
代碼實(shí)例：
<!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)單擊淘寶鏈接的時(shí)候，先彈出div框架，因?yàn)榻壎ǖ膁iv上面的單擊事件得到觸發(fā)，box里面的函數(shù)得到執(zhí)行；確定“div”的對(duì)話框后再?gòu)棾鰞?nèi)容是“http：//www.taobao.com”的對(duì)話框，綁定在a標(biāo)簽的單擊事件得到觸發(fā)，links函數(shù)得到執(zhí)行。
內(nèi)部元素a觸發(fā)的事件先在父級(jí)元素得到處理，然后才交給內(nèi)部的元素a進(jìn)行處理，因?yàn)楦讣?jí)元素div綁定了click單擊事件，所以增加了事件修飾符capture。
3、self修飾符
這個(gè)修飾符只是用來(lái)接收自己觸發(fā)的事件函數(shù)，只有綁定這個(gè)事件的元素觸發(fā)事件的時(shí)候，才會(huì)觸事件的處理函數(shù)，而且這個(gè)事件不會(huì)被冒泡或者被捕獲。我們通過(guò)實(shí)例代碼了解一下：
實(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é)果：
我們可以看到通過(guò)單擊只會(huì)出現(xiàn)“button”，按鍵的單擊事件觸發(fā)，div沒(méi)有接收到冒泡，div上面的單擊事件沒(méi)有被觸發(fā)。通過(guò)單擊div，只能輸出“div”div的單擊事件被觸發(fā)，但是按鍵的單擊事件沒(méi)有被觸發(fā)。
4、prevent修飾符
這個(gè)修飾符主要用來(lái)阻止默認(rèn)事件。
實(shí)例代碼：
<!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">開(kāi)始可以訪問(wèn)到淘寶網(wǎng)</a>
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="func">不可以訪問(wèn)到淘寶網(wǎng)</a>
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent.once="func">首次不可以訪問(wèn)到淘寶網(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é)果：
我們看到點(diǎn)擊第一個(gè)鏈接的時(shí)候，就可以彈出對(duì)話框，只要確定，就可以跳轉(zhuǎn)到淘寶網(wǎng)，因?yàn)閱螕羰录统溄訒r(shí)間單擊跳轉(zhuǎn)時(shí)間都已經(jīng)被執(zhí)行！
點(diǎn)擊第二個(gè)長(zhǎng)鏈接的時(shí)候，只是彈出了對(duì)話框，但是沒(méi)有跳轉(zhuǎn)到淘寶網(wǎng)，每一次點(diǎn)擊都一樣，因?yàn)樵诔绦蛑幸呀?jīng)給到click的單擊事件增加了一個(gè)prevent事件修飾符，阻止了超鏈接的默認(rèn)單擊跳轉(zhuǎn)事件；
點(diǎn)擊第三個(gè)超鏈接的時(shí)候，在第一次的時(shí)候，只是彈出了對(duì)話框，沒(méi)有跳轉(zhuǎn)到淘寶，而第二次點(diǎn)擊的時(shí)候，就可以跳轉(zhuǎn)到淘寶網(wǎng)了，因?yàn)榈谌齻€(gè)鏈接添加了.once，事件只能發(fā)生一次觸發(fā)事件。
5、鍵盤(pán)事件修飾符
鍵盤(pán)修飾符可以使用鍵碼，也可以使用鍵字符，方向鍵的上下左右用.up、.down、.left、.right;delete鍵用于捕獲“刪除”和“退格”鍵等等。
代碼實(shí)例：
<!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é)果：
我們可以看到，第一個(gè)框輸入數(shù)字，每一個(gè)字符都可以觸發(fā)keyup事件；第二個(gè)框的時(shí)候，輸入字符不能觸發(fā)keyup事件，只有按下回車(chē)鍵的時(shí)候才能被觸發(fā)，函數(shù)才能被執(zhí)行！
6、鼠標(biāo)事件修飾符
鼠標(biāo)事件修飾符的時(shí)候，鼠標(biāo)的左中右三個(gè)鍵分別是.left、.middle、.right,這個(gè)時(shí)間修飾符很簡(jiǎn)單，我們直接通過(guò)代碼程序來(lái)說(shuō)明。
實(shí)例代碼：
<!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é)果：
當(dāng)我們?cè)诎粹o上面通過(guò)單擊左鍵，按鈕的click事件救護(hù)被觸發(fā)func函數(shù)執(zhí)行，彈出對(duì)話框，在綁定click事件的時(shí)候增加的事件修飾符，.prevent是用來(lái)阻止右鍵的時(shí)候調(diào)用系統(tǒng)菜單的默認(rèn)事件。
到此這篇關(guān)于Vue快速理解事件綁定是什么的文章就介紹到這了,更多相關(guān)Vue事件綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue使用csp的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了elementUI table如何給表頭添加氣泡顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)
這篇文章主要介紹了Vue-CLI項(xiàng)目-axios模塊前后端交互的使用詳解(類似ajax提交),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
組件是什么？組件是用基礎(chǔ)的元素組成的復(fù)雜的、可以重復(fù)使用的代碼單元，就相當(dāng)于疊疊樂(lè)一樣的快件，可以將這些復(fù)用的代碼封裝其起來(lái)構(gòu)成的組件可需要的時(shí)候進(jìn)行調(diào)用2022-08-08
Vue實(shí)現(xiàn)首頁(yè)banner自動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)首頁(yè)banner自動(dòng)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
父組件向子組件傳值的時(shí)候,子組件是通過(guò)props來(lái)接收的,然后以變量的形式將props傳遞到setup語(yǔ)法糖果中使用,本文給大家介紹vue3 setup語(yǔ)法糖之父子組件之間的傳值,感興趣的朋友一起看看吧2023-12-12
vue-cropper組件實(shí)現(xiàn)圖片切割上傳
這篇文章主要為大家詳細(xì)介紹了vue-cropper組件實(shí)現(xiàn)圖片切割上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Vue+Element一步步實(shí)現(xiàn)動(dòng)態(tài)添加Input_輸入框案例
這篇文章主要介紹了Vue+Element一步步實(shí)現(xiàn)動(dòng)態(tài)添加Input_輸入框案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
前端不用跑項(xiàng)目vscode組件效果所見(jiàn)即所得
這篇文章主要為大家介紹了一款不用跑項(xiàng)目的vscode組件所見(jiàn)即所得效果的使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
vue組件講解(is屬性的用法)模板標(biāo)簽替換操作
這篇文章主要介紹了vue組件講解(is屬性的用法)模板標(biāo)簽替換操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09