vue @click 多个事件_VUE学习记录3
生活随笔
收集整理的這篇文章主要介紹了
vue @click 多个事件_VUE学习记录3
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
v-on的基本使用
? 在前面的計數器案例中使用了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)聽事件以及回調函數，@是v-on:的語法糖，也就是簡寫也可以使用@click。方法一般是需要寫方法名加上()，在@click中可以省掉，如上述的<button @click="increment">加</button>。
v-on的參數傳遞
? 了解了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>Document</title> </head> <body><div id="app"><!-- 事件沒傳參 --><button @click="btnClick">按鈕1</button><button @click="btnClick()">按鈕2</button><!-- 事件調用方法傳參，寫函數時候省略小括號，但是函數本身需要傳遞一個參數 --><button @click="btnClick2(123)">按鈕3</button><button @click="btnClick2()">按鈕4</button><button @click="btnClick2">按鈕5</button><!-- 事件調用時候需要傳入event還需要傳入其他參數 --><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("點擊XXX");},btnClick2(value){console.log(value+"----------");},btnClick3(event,value){console.log(event+"----------"+value);}}})</script> </body> </html>按鈕4調用btnClick2(value){}，此時undefined。按鈕5調用時省略了()，會自動傳入原生event事件，如果我們需要event對象還需要傳入其他參數，可以使用$event對象。
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事件不會傳播，不會冒泡到上層，調用event.stopPropagation() --><div @click="divClick"><button @click.stop="btnClick">按鈕1</button></div><!-- 2. .prevent 調用event.preeventDefault阻止默認行為 --><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("點擊button");},divClick(){console.log("點擊div");},submitClcik(){console.log("提交被阻止了")},keyup(){console.log("keyup點擊")}}})</script> </body> </html>總結
以上是生活随笔為你收集整理的vue @click 多个事件_VUE学习记录3的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java技术文章在哪里看呢_谈论Java
- 下一篇： html5倒计时秒杀怎么做,vue 设