一、绑定事件
@是v-on:的简写，通过v-on:指令绑定事件，指定一个methods选项里面定义的方法
1.函数可以传参，不传参也有默认参数
①传参后，打印的结果是传递的参数
<button @click="sayHi(123)">sayHi</button>
sayHi(e) {
console.log(e); //123
},
②不传参，打印结果是PointerEvent事件对象
<button @click="sayHi">sayHi</button> <button @click="sayHi">sayHi</button>
③如果即想传参数，又想把事件对象传递过去，就要加上$event
<button @click="sayHello('Nice',$event)">sayHello</button>
sayHello(msg,e){
console.log(msg,e); //Nice和pointerEvent事件对象
}
2.当事件处理的代码比较简单时，可以将代码直接写在行内。
注意：只能操作Vue管理的数据
<button @click="age++">年龄++</button>
二、Vue事件修饰符
1.事件修饰符.prevent,用于阻止默认行为
<div @contextmenu.prevent="right" class="box"></div>
right(){
console.log('hello!');
}
2.事件修饰符.stop,用于阻止事件冒泡
<div class="box2" @click.stop="two">
3.事件修饰符.once,用于只绑定一次事件
<div class="box1" @click.once="one">
4.事件修饰符.self,只能在自身元素上触发，不能再子元素上触发和.stop有点相似
<div class="big" @click.self="hello">
三、按键修饰符
1.按键修饰符.enter,按下回车触发事件
<p>请输入搜索内容：<input type="text" @keyup.enter="two"></p>
2.按键修饰符.esc,按下Esc键，触发事件
<p>请按上键：<input type="text" @keyup.esc="esc"></p>
3.按键修饰符.up、.down、.left、.right
<p>请按上键：<input type="text" @keyup.up="up"></p>
<p>请按下键：<input type="text" @keyup.down="down"></p>
<p>请按左键：<input type="text" @keyup.left="left"></p>
<p>请按右键：<input type="text" @keyup.right="right"></p>
