八、事件监听(一)
1、v-on 的基本使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../Js/vue.min.js"></script> </head> <body> <div id="app"> <h3>{{counter}}</h3> <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> <p>调用methods方法</p> <button v-on:click="increment()">+</button> <button v-on:click="transment()">-</button> <!-- //v-on的语法糖 --> <p>语法糖写法</p> <button @click="increment()">+</button> <button @click="transment()">-</button> </div> <script> const app = new Vue({ el:"#app", data:{ counter:0 }, methods:{ increment(){ this.counter++; }, transment(){ this.counter--; } } }); </script> </body> </html>
2、v-on 的参数传递
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../Js/vue.min.js"></script> </head> <body> <div id="app"> <!-- 事件调用的方法没有参数 --> <button @click="btn1Click">按钮1</button> <!-- 在事件定义时,写函数时省略了小括号,但是方法本身是需要一个参数的, 这个时候,浏览器会默认将浏览器生成的event事件对象作为参数传入到方法 --> <!-- <button @click="btn2Click(123)">按钮2</button> --> <!-- <button @click="btn2Click()">按钮2</button> --> <button @click="btn2Click">按钮2</button> <!-- 在函数定义时,我们需要event对象,同时又需要其他参数 --> <!-- 在调用方式,如何手动的获取到浏览器参数的event对象:$event--> <button @click="btn3Click(123,$event)">按钮3</button> </div> <script> const app = new Vue({ el:"#app", data:{ }, methods: { btn1Click(){ console.log("btn1Click"); }, btn2Click(event){ console.log("--------------", event); }, btn3Click(abc,event){ console.log("--------------", abc , event); } } }); </script> </body> </html>