一、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>