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"> <title>Document</title> <style> h2 { display: inline; margin: 20px; } </style> </head> <body> <div id="app"> <!-- button绑定点击事件 increasement 不需要传参可以不加() --> <button @click = 'incresement'>+</button> <h2>{{counter}}</h2> <button @click = 'decresement'>-</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el : '#app', data : { counter : 0 //定义计数器 }, methods : { //定义增加和减少时调用的函数 可以省略:function incresement:function(){ this.counter++; }, decresement(){ this.counter--; } } }) </script> </body> </html>
含有形参的函数绑定事件时,加()和不加()的区别
函数本身不需要参数时,可直接省略()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 按钮1 2 绑定相同事件btn1 btn2,被绑定事件包含形参 button1绑定点击事件加(),但不传实参,默认为undefined button2不加(),默认传入原生事件 MouseEvent{isTrusted: true....} --> <button @click = 'btn1()'>button1</button> <button @click = 'btn2'>button2</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { msg :'hello' }, methods: { btn1(arg){ console.log(arg); }, btn2(arg){ console.log(arg); } } }) </script> </body> </html>
同时需要普通参数和event的时候,需要通过$event传递实参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <button @click ='btn3(123,$event)' >button3</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { msg :'hello' }, methods: { btn3(arg,event){ console.log(arg,event); } } }) </script> </body> </html>
.stop - 阻止事件冒泡
.prevent - 阻止默认行为
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调