Vue前端开发:事件绑定方式
事件定义
在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,由于@指令的方式写法更精简,目前大部分都使用这种方式绑定元素的事件。