v-on指令：可以监听事件，比如点击，拖拽，键盘事件等等
作用：绑定事件监听器
缩写：@
当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加
注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件
<div id="app">
<!--1.事件调用的方法没有参数,小括号加不加都是一样的 -->
<button @click="btn1()">按钮1(1)</button>
<button @click="btn1">按钮1(1)</button>
<!--2.在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的，这个时候vue会默认将浏览器生产的event事件对象作为参数传入到方法 -->
<!-- (1)在小括号里写参数会显示小括号里的 -->
<button @click="btn2(123)">按钮2(1)</button>
<!-- (2)如果函数需要参数，但是没有传入，那么函数的形参为undefined -->
<button @click="btn2()">按钮2(2)</button>
<!-- (3)不写小括号直接显示event事件对象 -->
<button @click="btn2">按钮2(3)</button>
<!-- 3.方法定义时，我们需要event对象，同时又需要其他参数-->
<!-- 在调用方法时，如何手动的获取到浏览器参数的event对象：$event -->
<button @click="btn3('abc',$event)">按钮3</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message:'hello kitty'
},
methods:{
btn1(){
console.log("点击1");
},
btn2(event){
console.log("点击2",event);
},
btn3(e,event){
console.log("点击3",e,event)
}
}
})
</script>
