VUE3基礎(chǔ)學(xué)習(xí)之click事件詳解
更新時間：2022年01月06日 11:32:49 作者：追風(fēng)人聊Java
由于vue是一個雙向數(shù)據(jù)綁定的框架,它的點擊事件與以前常用的還是有很大的差別的,下面這篇文章主要給大家介紹了關(guān)于VUE3基礎(chǔ)學(xué)習(xí)之click事件的相關(guān)資料,需要的朋友可以參考下
1. 概述
老話說的好：努力幫別人解決難題，你的難題也就不難解決了。
言歸正傳，今天我們來聊聊 VUE3 的 click 事件的相關(guān)知識。
2. click 事件
2.1 實現(xiàn)數(shù)字遞減
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 創(chuàng)建一個vue應(yīng)用實例
data() {
return {
num : 5
}
},
methods : {
decr() {
if(this.num <= 0) {
alert("庫存為0，無法購買")
return;
}
this.num-- ;
},
},
template : `
<div>
商品庫存剩余 {{num}} 件
<button @click="decr">購買</button><br>
</div>
`
});
const vm = app.mount('#myDiv'); // 綁定id為 myDiv 的元素該例中，每點一次按鈕，商品庫存都會減 1
2.2 事件方法中獲取 event 對象
decr(event) {
console.info(event);
console.info(event.target);
if(this.num <= 0) {
alert("庫存為0，無法購買")
return;
}
this.num-- ;
},方法中可以獲取 event 對象，從中可以獲取一些事件信息
2.3 事件方法中增加參數(shù)
methods : {
decr(n) {
if(this.num < 2) {
alert("庫存不足，無法購買")
return;
}
this.num -= n;
},
},
template : `
<div>
商品庫存剩余 {{num}} 件
<button @click="decr(2)">購買2件</button><br>
</div>
`事件方法 decr 中增加了參數(shù) n，依據(jù)參數(shù)進(jìn)行計算
2.4 有參事件方法中獲取 event 對象
methods : {
decr(n, event) {
console.info(event);
console.info(event.target);
if(this.num < 2) {
alert("庫存不足，無法購買")
return;
}
this.num -= n;
},
},
template : `
<div>
商品庫存剩余 {{num}} 件
<button @click="decr(2, $event)">購買2件</button><br>
</div>
`
2.5 點擊按鈕執(zhí)行多個方法
methods : {
f1() {
alert("f1")
},
f2() {
alert("f2")
},
},
template : `
<div>
<button @click="f1(), f2()">執(zhí)行多個方法</button><br>
</div>
`2.6 事件冒泡
methods : {
clickDiv() {
alert("div");
},
clickButton() {
alert("button");
}
},
template : `
<div @click="clickDiv">
<button @click="clickButton">事件冒泡</button><br>
</div>
`點擊按鈕，會先執(zhí)行 button 上的 click 事件，然后執(zhí)行 div 上的 click 事件
2.7 阻止冒泡
template : `
<div @click="clickDiv">
<button @click.stop="clickButton">阻止事件冒泡</button><br>
</div>
`如果我們希望點擊按鈕時只執(zhí)行按鈕的事件，可以在按鈕上使用 @click.stop 的寫法阻止事件冒泡。
2.8 事件捕獲
template : `
<div @click.capture="clickDiv">
<button @click="clickButton">事件捕獲</button><br>
</div>
`如果希望先執(zhí)行 div 事件，再執(zhí)行 button 的事件，可以在 div 上使用 @click.capture 的寫法，讓事件由外向內(nèi)執(zhí)行
2.9 事件只執(zhí)行一次
template : `
<div @click.once="clickDiv">
<button @click="clickButton">事件</button><br>
</div>
`在 div 上使用 @click.once ，這樣 div 的事件，只會被執(zhí)行一次
3. 綜述
今天聊了一下 VUE3 的 click 事件，希望可以對大家的工作有所幫助
到此這篇關(guān)于VUE3基礎(chǔ)學(xué)習(xí)之click事件的文章就介紹到這了,更多相關(guān)VUE3之click事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)
今天小編就為大家分享一篇vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
利用vue + element實現(xiàn)表格分頁和前端搜索的方法
眾所周知Element 是一套 Vue.js 后臺組件庫，它能夠幫助你更輕松更快速地開發(fā)后臺項目。下面這篇文章主要給大家介紹了關(guān)于利用vue + element實現(xiàn)表格分頁和前端搜索的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-12-12
這篇文章主要介紹了詳解vue或uni-app的跨域問題解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了原理深度解析Vue的響應(yīng)式更新比React快，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue-router的基本使用和配置教程，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了 Vue 源碼分析之 Observer實現(xiàn)過程，Observer 最主要的作用就是實現(xiàn)了touch -Data(getter) - Collect as Dependency這段過程，也就是依賴收集的過程，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題
這篇文章主要介紹了vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue實現(xiàn)前端頁面緩存的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue+element?tree懶加載更新數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+element?tree懶加載更新數(shù)據(jù),文中給大家補充介紹了Vue Element Ui 樹形表懶加載新增、修改、刪除等操作后局部數(shù)據(jù)更新的詳細(xì)代碼，感興趣的朋友跟隨小編一起看看吧2022-09-09
今天遇到一個bug,有一個Element的message組件,用它做的一個進(jìn)度條,它是寫在一個頁面上,并且是用js控制dom元素的,web端一切正常,但是,H5頁面刷新的時候它樣式加載不出來了,所以本文主要介紹了Vue項目刷新后h5樣式失效的原因及解決方案,需要的朋友可以參考下2024-10-10