<!-- @是v-on:的简写，通过v-on:指令绑定事件，指定一个methods选项里面的定义的方法，

        调用方法时，不传参数，默认会将事件对象作为参数传递 -->

        <button @click="sayHi">sayHi</button>

        <!-- 调用方法时，传的是什么参数，接的就是什么参数 -->

        <button @click="sayHello('hello')">sayHello</button>

        <!-- 调用方法时，传递一个$event参数，该参数就是事件对象 -->

        <button @click="sayNice('Nice',$event)">sayNice</button>

<!-- 当前事件处理的代码比较简单时，可以将代码直接写在行内，注意：只能操作Vue管理的数据 -->

<button @click="age++">年龄++</button>

事件修饰符

.prevent，用于阻止默认行为

<div class="box" @contextmenu.prevent="showbox">

contextmenu是鼠标右击事件

阻止默认行为

e.preventDefault()

 <!-- .once，用只绑定一次事件方法 -->

        <div class="one" @click.once="one">

<!-- .stop，用于阻止事件冒泡 -->

            <div class="two" @click.stop="two"></div>

<!-- .self，只能在自身元素上触发，不同在子元素上触发 -->

        <div class="box2" @click.self="showbox2">

            <div class="box3"></div>

        </div>

键盘事件

@keyup.enter是回车事件，enter可以写13

深度响应式