Vue中的事件綁定問題
何為事件綁定
當(dāng)我們開發(fā)完UI界面后，還需要和用戶交互，所謂交互也就是用戶可以點擊界面上的按鈕，文字，鏈接等以及點擊鍵盤上的按鈕，我們開發(fā)的程序可以做出對應(yīng)的反應(yīng)。
做出的反應(yīng)會通過UI界面再反饋給用戶，或是對話框，或是跳轉(zhuǎn)到新頁面。
總之就是響應(yīng)用戶的某個操作。
在VUE3中定義事件綁定可以通過在你想注冊點擊事件的dom元素中，使用@click = "響應(yīng)操作的JS函數(shù)"的方式來實現(xiàn)，方式不唯一，這種方式是一種簡寫，感興趣的可以去官網(wǎng)查看不同的寫法，這里主要是為了演示VUE3事件綁定
示例解析
簡單情景解析
示例：假設(shè)我們要實現(xiàn)一個簡單的計數(shù)器功能，即點擊按鈕，計數(shù)器會一直加一。
注：此例子用在真實的環(huán)境中就可能是統(tǒng)計用戶量或者訪問量，只是這里做演示用將觸發(fā)計數(shù)的操作用按鈕的方式實現(xiàn)。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>event bind</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
counter:0
}
},
methods: {
//事件修飾符：stop，prevent，capture，self,once,passive
//按鍵修飾符：enter，tab,delete,esc,up,down,left,right
//鼠標(biāo)事件修飾符：left,right,middle
handleBtnClick(){
this.counter+=1;
},
},
template:`
<div>
{{counter}}
<button @click="handleBtnClick()">button</button>
<input @keydown.enter="handleBtnClick()">點擊事件</input>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
我們綁定的事件主要大致分為，鼠標(biāo)點擊事件，拖拽事件，鍵盤事件，在上面的代碼示例中主要演示了鼠標(biāo)，點擊事件和鍵盤事件，默認(rèn)顯示的是0，當(dāng)我們點擊button或者是聚焦輸入框后按下鍵盤上的enter鍵時，都會調(diào)用JS函數(shù)handleBtnClick()進(jìn)行加一操作。
運行截圖：
上圖中有一個button和一個輸入框，以及左上角一個顯示計數(shù)值的區(qū)域，點擊button，或者是點擊輸入框，使其進(jìn)入到輸入狀態(tài)時，再點擊鍵盤的enter鍵，計數(shù)值都會加一
這里是為了演示點擊事件和鍵盤事件
特殊情景避坑
上面的示例看似實現(xiàn)了我們的需求，但是有種特殊的情況可能會導(dǎo)致我們遇見意外的情況，那就是當(dāng)我們的button作為子控件并綁定了點擊事件，button的父控件，比如一個DIV也綁定了一個事件，這時候我們點擊button，會出現(xiàn)什么情況呢？
我們一起看看：
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>event bind</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
counter:0
}
},
methods: {
//事件修飾符：stop，prevent，capture，self,once,passive
//按鍵修飾符：enter，tab,delete,esc,up,down,left,right
//鼠標(biāo)事件修飾符：left,right,middle
handleBtnClick(){
this.counter+=1;
},
handleDivClick(){
alert('div clicked!')
}
},
template:`
<div>
<div @click="handleDivClick()">
{{counter}}
<button @click="handleBtnClick()">button</button>
</div>
<input @keydown.enter="handleBtnClick()">點擊事件</input>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
正如代碼所示，我們給button加一個父DIV，然后給父DIV也幫定了一個點擊事件，點擊DIV時讓其執(zhí)行handleDivClick函數(shù)顯示一個彈窗。
這會出現(xiàn)啥呢？
關(guān)鍵代碼如下：
<div @click="handleDivClick()">
{{counter}}
<button @click="handleBtnClick()">button</button>
</div>
結(jié)果是，會先響應(yīng)父DIV的時間，顯示一個彈窗
當(dāng)我們點擊了彈窗的確定了后，在響應(yīng)button的操作進(jìn)行計數(shù)器加一操作。
這種結(jié)果很明顯是不符合我們預(yù)期的，我們想要的效果是點擊按鈕的時候響應(yīng)按鈕的操作，點擊DIV的時候響應(yīng)DIV的操作，但是這時候兩個事件混在一起了，那我們該怎么辦呢？
Vue3給出了解決辦法那就是加事件修飾符：stop，prevent，capture，self,once,passive。
如下所示：
<div @click.self="handleDivClick()">
{{counter}}
<button @click.stop="handleBtnClick()">button</button>
</div>
這種情況其實可以稱為事件冒泡，我們點擊按鈕的時候，事件先到了DIV，所以響應(yīng)了DIV的操作，然后又傳到了button，所以當(dāng)執(zhí)行完DIV的操作后又會繼續(xù)執(zhí)行button的操作。
解決這種問題可以給button加一個stop事件修飾符，或者是給父DIV加一個self修飾符就可以了。
這樣他們的事件就不會混到一起了。
總結(jié)
其實事件綁定就是給用戶一個和我們程序交互到接口，讓用戶可以通過鼠標(biāo)，鍵盤，屏幕觸摸，手勢等輸入來執(zhí)行自己想要的操作，本文只是簡單介紹了事件綁定的基本知識和一個小坑，讀者若是想深入的了解事件綁定的具體使用，請參考官網(wǎng)的詳細(xì)API。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue組件化學(xué)習(xí)之scoped，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了淺談Vue灰度發(fā)布新功能的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要分享可編寫 Vue v-for 循環(huán)的 7 種方式，在Vue中，基本上每個項目都會用到v-for循環(huán)。它們允許你在模板代碼中編寫for循環(huán)，接下來一起看看下面文章的詳細(xì)介紹吧2021-12-12
隨著前端的項目的越來越復(fù)雜,出現(xiàn)了一堆概念來降低開發(fā)的復(fù)雜性,單向數(shù)據(jù)流就是其中一個,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue跳轉(zhuǎn)后不記錄歷史記錄的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue中如何引用公共方法和公共組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue v-text指令簡單使用方法,結(jié)合實例形式分析了v-text指令文本輸出顯示簡單操作技巧,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了解決vue 局部過濾器獲取不到this的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了Vue中的scoped及穿透方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04