一、v-on基本形式
<!-- 完整形式 -->
<button v-on:click="increment">+</button>
<!-- 语法糖 -->
<button @click="decrement">-</button>
实例:数字相加
<div id="app"> <h2>{{counter}}</h2> <button v-on:click="increment">+</button> <button @click="increment">-</button> </div> <script> const app = new Vue({ el:'#app', data:{ counter:0 }, methods:{ increment(){ this.counter++ }, decrement(){ this.counter-- } } }) </script>
二、v-on事件调用
#事件调用没有参数
<button @click="btnClick()">点击我1</button> <button @click="btnClick">点击我2</button>
#在事件定义中 写函数时省略 小括号 但是方法本身是需要一个参数的
<button @click="btn2Click(123)">点击我3</button>
#在事件定义时,写函数时省略了小括号,但是方法本身需要一个参数,这时候,vue会默认将浏览器生成的event事件对象作为参数传入到方法
<button @click="btn2Click">点击我3</button>
#在方法定义时,需要event对象,同时又需要其他参数
#在调用方法时,如何手动的获取到浏览器参数的event对象,$event
<button @click="btn3Click(123,$event)">按钮3</button>
实例:
<div id="app"> <!-- 事件调用没有参数 --> <button @click="btnClick()">点击我1</button> <button @click="btnClick">点击我2</button> <!-- 在事件定义中 写函数时省略 小括号 但是方法本身是需要一个参数的 --> <!-- <button @click="btn2Click(123)">点击我3</button> --> <!-- 在事件定义时,写函数时省略了小括号,但是方法本身需要一个参数,这时候,vue会默认将浏览器生成的event事件对象作为参数传入到方法 --> <button @click="btn2Click">点击我3</button> <!-- 在方法定义时,需要event对象,同时又需要其他参数 --> <!-- 在调用方法时,如何手动的获取到浏览器参数的event对象,$event --> <button @click="btn3Click(123,$event)">按钮3</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ message:"你好啊" }, methods:{ btnClick(){ alert(1); }, btn2Click(event){ alert(event); }, btn3Click(abc,event){ console.log('++++',abc,event); } } }) </script>