Vue前端开发：事件绑定方式

news2024/11/22 16:33:30

事件定义

在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>