當(dāng)前位置：
首頁 >
vue @click 多个事件_VUE学习记录3
發(fā)布時(shí)間：2025/3/15
56
豆豆
生活随笔
收集整理的這篇文章主要介紹了
vue @click 多个事件_VUE学习记录3
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
v-on的基本使用
? 在前面的計(jì)數(shù)器案例中使用了v-on:click監(jiān)聽單擊事件。這里在回顧一下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><title>Document</title> </head> <body><div id="app"><h2>{{count}}</h2><!-- <button v-on:click="count++">加</button><button v-on:click="count--">減</button> --><button @click="increment">加</button><button @click="decrement()">減</button></div><script>const app = new Vue({el:"#app",data:{count:0},methods: {increment(){this.count++},decrement(){this.count--}}})</script> </body> </html>? 使用v-on:click給button綁定監(jiān)聽事件以及回調(diào)函數(shù)，@是v-on:的語法糖，也就是簡(jiǎn)寫也可以使用@click。方法一般是需要寫方法名加上()，在@click中可以省掉，如上述的<button @click="increment">加</button>。
v-on的參數(shù)傳遞
? 了解了v-on的基本使用，現(xiàn)在需要了解參數(shù)傳遞。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><div id="app"><!-- 事件沒傳參 --><button @click="btnClick">按鈕1</button><button @click="btnClick()">按鈕2</button><!-- 事件調(diào)用方法傳參，寫函數(shù)時(shí)候省略小括號(hào)，但是函數(shù)本身需要傳遞一個(gè)參數(shù) --><button @click="btnClick2(123)">按鈕3</button><button @click="btnClick2()">按鈕4</button><button @click="btnClick2">按鈕5</button><!-- 事件調(diào)用時(shí)候需要傳入event還需要傳入其他參數(shù) --><button @click="btnClick3($event,123)">按鈕6</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",methods:{btnClick(){console.log("點(diǎn)擊XXX");},btnClick2(value){console.log(value+"----------");},btnClick3(event,value){console.log(event+"----------"+value);}}})</script> </body> </html>按鈕4調(diào)用btnClick2(value){}，此時(shí)undefined。按鈕5調(diào)用時(shí)省略了()，會(huì)自動(dòng)傳入原生event事件，如果我們需要event對(duì)象還需要傳入其他參數(shù)，可以使用$event對(duì)象。
6.3 v-on的修飾詞
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-on的修飾符</title> </head> <body><div id="app"><!--1. .stop的使用，btn的click事件不會(huì)傳播，不會(huì)冒泡到上層，調(diào)用event.stopPropagation() --><div @click="divClick"><button @click.stop="btnClick">按鈕1</button></div><!-- 2. .prevent 調(diào)用event.preeventDefault阻止默認(rèn)行為 --><form action="www.baidu.com"><button type="submit" @click.prevent="submitClick">提交</button></form><!--3. 監(jiān)聽鍵盤的事件 --><input type="text" @click.enter="keyup"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",methods:{btnClick(){console.log("點(diǎn)擊button");},divClick(){console.log("點(diǎn)擊div");},submitClcik(){console.log("提交被阻止了")},keyup(){console.log("keyup點(diǎn)擊")}}})</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的vue @click 多个事件_VUE学习记录3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java技术文章在哪里看呢_谈论Java
- 下一篇： seo vue 动态路由_VUE项目SE