Vue中的事件綁定問題
何為事件綁定
當我們開發(fā)完UI界面后，還需要和用戶交互，所謂交互也就是用戶可以點擊界面上的按鈕，文字，鏈接等以及點擊鍵盤上的按鈕，我們開發(fā)的程序可以做出對應的反應。
做出的反應會通過UI界面再反饋給用戶，或是對話框，或是跳轉(zhuǎn)到新頁面。
總之就是響應用戶的某個操作。
在VUE3中定義事件綁定可以通過在你想注冊點擊事件的dom元素中，使用@click = "響應操作的JS函數(shù)"的方式來實現(xiàn)，方式不唯一，這種方式是一種簡寫，感興趣的可以去官網(wǎng)查看不同的寫法，這里主要是為了演示VUE3事件綁定
示例解析
簡單情景解析
示例：假設我們要實現(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
//鼠標事件修飾符：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>
我們綁定的事件主要大致分為，鼠標點擊事件，拖拽事件，鍵盤事件，在上面的代碼示例中主要演示了鼠標，點擊事件和鍵盤事件，默認顯示的是0，當我們點擊button或者是聚焦輸入框后按下鍵盤上的enter鍵時，都會調(diào)用JS函數(shù)handleBtnClick()進行加一操作。
運行截圖：
上圖中有一個button和一個輸入框，以及左上角一個顯示計數(shù)值的區(qū)域，點擊button，或者是點擊輸入框，使其進入到輸入狀態(tài)時，再點擊鍵盤的enter鍵，計數(shù)值都會加一
這里是為了演示點擊事件和鍵盤事件
特殊情景避坑
上面的示例看似實現(xiàn)了我們的需求，但是有種特殊的情況可能會導致我們遇見意外的情況，那就是當我們的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
//鼠標事件修飾符：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é)果是，會先響應父DIV的時間，顯示一個彈窗
當我們點擊了彈窗的確定了后，在響應button的操作進行計數(shù)器加一操作。
這種結(jié)果很明顯是不符合我們預期的，我們想要的效果是點擊按鈕的時候響應按鈕的操作，點擊DIV的時候響應DIV的操作，但是這時候兩個事件混在一起了，那我們該怎么辦呢？
Vue3給出了解決辦法那就是加事件修飾符：stop，prevent，capture，self,once,passive。
如下所示：
<div @click.self="handleDivClick()">
{{counter}}
<button @click.stop="handleBtnClick()">button</button>
</div>
這種情況其實可以稱為事件冒泡，我們點擊按鈕的時候，事件先到了DIV，所以響應了DIV的操作，然后又傳到了button，所以當執(zhí)行完DIV的操作后又會繼續(xù)執(zhí)行button的操作。
解決這種問題可以給button加一個stop事件修飾符，或者是給父DIV加一個self修飾符就可以了。
這樣他們的事件就不會混到一起了。
總結(jié)
其實事件綁定就是給用戶一個和我們程序交互到接口，讓用戶可以通過鼠標，鍵盤，屏幕觸摸，手勢等輸入來執(zhí)行自己想要的操作，本文只是簡單介紹了事件綁定的基本知識和一個小坑，讀者若是想深入的了解事件綁定的具體使用，請參考官網(wǎng)的詳細API。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue.js如何更改默認端口號8080為指定端口的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
在開發(fā)項目的時候，我們一般都用 vue-cli 來避免繁瑣的 webpack 配置和 template 配置。這篇文章主要介紹了如何寫一個 vue 插件,需要的朋友可以參考下2019-06-06
本篇文章主要介紹了Vue獲取DOM元素樣式和樣式更改示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了Vue js with語句原理及用法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)伸縮菜單功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在使用 Vue 開發(fā)的這幾年里，掌握一些有用的技巧，使用一些更高級的技術(shù)點，總會有用的，本文就介紹了15個Vue技巧，具有一定的參考價值，感興趣的可以了解一下2022-02-02
Vue項目Element表格對應字段映射顯示方法:formatter格式化數(shù)據(jù)問題
這篇文章主要介紹了Vue項目Element表格對應字段映射顯示方法:formatter格式化數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本篇文章主要介紹了如何在 Vue.js 中使用第三方js庫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
vue?beforeDestroy?clearInterval清除定時器失效的解決
這篇文章主要介紹了vue?beforeDestroy?clearInterval清除定時器失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue-router 2.0 跳轉(zhuǎn)之router.push()用法說明
這篇文章主要介紹了vue-router 2.0 跳轉(zhuǎn)之router.push()用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08