一、绑定事件

@是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>