事件定义
在Vue中，当一个元素通过使用v-on或语法糖@指令绑定某个事件后，则完成了事件被定义的过程，在这定义的过程中，指令的后面是定义事件的名称，等号的后面是事件被触发后执行的函数，当然，也可以在事件名称的后面，使用“.”点语法，添加事件的修饰符，如stop、prevent等，接下来分析事件定义后底层执行的流程。
事件定义的过程，实质是事件被元素绑定的过程，Vue在这个过程的底层做了什么?首先是编译模板生成渲染内容，然后将渲染内容生成虚拟节点，再由虚拟节点生成真实的DOM节点，生成DOM节点后，最后通过addEventListener方法，将对应事件绑定到元素中，其实现的流程如下图4-1所示。
事件绑定方式
在Vue 中，元素事件绑定的方式依赖于指令v-on或@，一旦完成事件绑定后，当被绑定的事件触发时，将会自动执行事件对应的函数，即执行事件的处理方法。
指令v-on或@
指令v-on专门用于元素事件的绑定，添加时通过“:”冒号将指令与事件名称隔开，冒号右侧为需要绑定的事件名称;@是指令绑定事件的一种简写方式，也是一种语法糖写法，由于书写简单，因此，大部分的开发人员都使用这种方式绑定元素的事件。
实例4-1 指令绑定事件
1. 功能描述
在页面中，添加两个按钮和一个div元素，分别使用不同的指令绑定两个按钮的单击事件，当单击某个按钮时，div元素中将显示变量累加后的值。
2. 实现代码
在项目components 文件夹的ch4子文件夹中，添加一个名为“BindEvent”的.vue文件，在文件中加入如清单4-1所示代码。
代码清单4-1 BindEvent.vue代码
<template><div class="action"><div class="a-item"><input type="button" value="v-on 绑定" v-on:click="num += 1" /></div><!-- @ 等价于v-on 指令--><div class="a-item"><input type="button" value="@ 绑定" @click="num += 1" /></div><div class="a-item">数量:{{ num }}</div></div>
</template><script>
export default {name: "BindEvent",data() {return {num: 1,};},
};
</script>
<style scoped>
.action .a-item {margin: 10px 0;
}
.action .a-item input {width: 80px;height: 32px;
}
</style>3. 页面效果
保存代码后，页面在Chrome浏览器下执行的页面效果如图4-1所示。
4. 源码分析
在上述示例的模板代码中，使用v-on和@指令的写法是等价的，都可以执行事件处理过程，使绑定的num 变量值累加1，因此，num变量的初始值为1，点击后变会为2，再次点击时变为3，由于@指令的方式写法更精简，目前大部分都使用这种方式绑定元素的事件。
