0
点赞
收藏
分享

微信扫一扫

linux的用户账号与权限管理

事件定义

在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,由于@指令的方式写法更精简,目前大部分都使用这种方式绑定元素的事件。
在这里插入图片描述

举报

相关推荐

0 条评论