VUE3 之 click 事件
1. 概述
老話說的好：努力幫別人解決難題，你的難題也就不難解決了。
言歸正傳，今天我們來聊聊 VUE3 的 click 事件的相關知識。
2. click 事件
2.1 實現數字遞減
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 創建一個vue應用實例
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 事件方法中增加參數
methods : { decr(n) { if(this.num < 2) { alert("庫存不足，無法購買") return; } this.num -= n; }, }, template : ` <div> 商品庫存剩餘 {{num}} 件 <button @click="decr(2)">購買2件</button><br> </div> `
事件方法 decr 中增加了參數 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 點擊按鈕執行多個方法
methods : { f1() { alert("f1") }, f2() { alert("f2") }, }, template : ` <div> <button @click="f1(), f2()">執行多個方法</button><br> </div> `
2.6 事件冒泡
methods : { clickDiv() { alert("div"); }, clickButton() { alert("button"); } }, template : ` <div @click="clickDiv"> <button @click="clickButton">事件冒泡</button><br> </div> `
點擊按鈕，會先執行 button 上的 click 事件，然後執行 div 上的 click 事件
2.7 阻止冒泡
template : ` <div @click="clickDiv"> <button @click.stop="clickButton">阻止事件冒泡</button><br> </div> `
如果我們希望點擊按鈕時只執行按鈕的事件，可以在按鈕上使用 @click.stop 的寫法阻止事件冒泡。
2.8 事件捕獲
template : ` <div @click.capture="clickDiv"> <button @click="clickButton">事件捕獲</button><br> </div> `
如果希望先執行 div 事件，再執行 button 的事件，可以在 div 上使用 @click.capture 的寫法，讓事件由外向內執行
2.9 事件只執行一次
template : ` <div @click.once="clickDiv"> <button @click="clickButton">事件</button><br> </div> `
在 div 上使用 @click.once ，這樣 div 的事件，只會被執行一次
3. 綜述
今天聊了一下 VUE3 的 click 事件，希望可以對大家的工作有所幫助
歡迎幫忙點贊、評論、轉發、加關注 ：）
關注追風人聊Java，每天更新Java乾貨。
4. 個人公眾號
追風人聊Java，歡迎大家關注
