v-on
语法糖：@
用法：
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
1、事件调用的方法没有参数
在事件监听的时候，调用对应的方法，如果方法没有参数，可以不加()
<button type="button" @click="add">+</button>
或者
<button type="button" @click="add()">+</button>
这两个效果一样的
methods:{
add(){
this.counter ++
}
}
2、有参数
1、有参数但是没写参数，也没有写括号
在事件定义时，省略了小括号，但是方法本身是需要参数的 ，这个时候，Vue会默认将浏览器产生的event事件对象作为参数传入到方法，所以当需要event对象的时候，就把event写到定义的函数的形参那，就相当于：
<button type=“button” @click=“btnClick2(event)”>按钮2
<button type="button" @click="btnClick2">按钮2</button>
methods:{
btnClick2(event){
console.log(event);
}
}
2、有参数但是没写参数，调用的时候写了括号
加括号这个会输出undefined，就是跟函数有形参但是调用的时候没有传实参一样
<button type="button" @click="btnClick2()">按钮2</button>
methods:{
btnClick2(abc){
console.log(abc);
}
}
3、有参数且需要event对象
方法定义的时候，需要 event 对象，同时又需要其它参数
在调用方法时，手动的获取到浏览器的event对象， $event 这是固定写法
这里如果调用的时候加了括号但是没有传参的话，event对象会输出，但是其它的普通的参数会输出undefined
<button type="button" @click="btnClick3(123,$event)">按钮3</button>
methods:{
btnClick3(abc,event){
console.log(abc,event);
}
}
3、事件修饰符
v-on修饰符
在某些情况下，拿到event的目的是进行一些事件处理；
Vue提供了修饰符帮助我们处理一些事件
1、.stop
.stop - 调用 event.stopPropagation()
<div @click="divClick">
<!-- .stop 阻止冒泡 调用 event.stopPropagation() 加了.stop button的事件就不再往上冒泡了，值返回自己的点击事件了 -->
<button type="button" @click.stop="btnClick">按钮</button>
</div>
methods: {
divClick() {
console.log('divClick');
},
btnClick() {
console.log("btnClick");
}
}
2、.prevent
.prevent - 调用 event.preventDefault()
<div id="app">
<a href="http://www.baidu.com" @click.prevent="alinkClick">百度一下 你就知道</a>
<!-- .prevent 阻止了<a>标签的默认跳转行为，点击只会触发alinkClick事件，不会跳转页面 -->
</div>
methods: {
alinkClick() {
console.log("alinkClick")
}
}
（下面的几个修饰符等我有时间详细写，可以看官网：Vue v-on）
3、.{keyCode| keyAlias}
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
4、.native
.native - 监听组件根元素的原生事件。
5、.once
.once - 只触发一次回调