Skip to content

Vue 事件绑定

Vue事件绑定

简介

对于前端页面来讲，要做一个功能复杂的前端应用，必然离不开用户的交互，和用户交互直接相关的也就是事件处理，这里的事件可以先简单理解为在页面上点击按钮的动作。vue 提供了 v-on 指令，使用这个指令，就可以进行事件处理的相关操作。

v-on 语法

v-on 的简写为 @，具体语法格式如下所示：

<!--v-on 指令完整写法-->
<div v-on:方法名='处理器'></div>
<!--v-on 指令简写形式-->
<div type=标签类型 @方法名='处理器'></div>

内联处理器

v-on 可以直接绑定表达式或者 JavaScript 语句，从而直接将其绑定到对应表达式的结果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      // 导入 Vue 中的 createApp和ref
      const { createApp ,ref} = Vue;
      window.onload = function () {
        createApp({
          setup() {
            // 定义被操作的响应式变量
            const numA = ref(0);
            const numB = ref(0);
            return { numA, numB };
          },
        }).mount("#app");
      };
    </script>
  </head>
  <body>
    <div id="app">
      <!--完整写法-->
      <p><input type="button" v-on:click="numA++" value="点击加1" />  {{numA}}</p>
      <!--简写形式-->
      <p><input type="button" @click="numB++" value="点击加1" />  {{numB}}</p>
    </div>
  </body>
</html>

实现效果如下图所示：

方法事件处理器

为了保持代码的可维护性和清晰性，显然地不应该将过多的逻辑写在模板中。

相反，可以使用 v-on 绑定一个函数来处理事件。这样，所有的逻辑都可以被封装在函数内部，使得代码更具可读性和可维护性。同时，事件处理器会自动接收原生 DOM 事件并触发执行相应的逻辑。

v-on 绑定函数有两个写法：

<!--v-on 绑定函数名称 适用于无参函数的调用 此时可省略括号-->
<input type='button' @click='add'>
<!--v-on 绑定函数调用 适用于无参和有参的调用-->
<input type='button' @click='add()'>

v-on 可以接收用户的行为，并同时调用函数实现相应的逻辑。

以下是一个使用按钮元素来实现点击按钮实现计算的示例，分别用两个函数来实现，函数 onClickAddA 默认点击加1的效果、函数 onClickAddB 根据传入的参数来改变每次相加的值，代码如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      // 导入 Vue 中的 createApp和ref
      const { createApp, ref } = Vue;
      countA = ref(0);
      countB = ref(0);

      window.onload = function () {
        createApp({
          setup() {
            // 定义一个无参函数
            const onClickAddA = () => {
              // 更新组件状态
              countA.value++;
            };
            // 定义一个有参函数
            const onClickAddB = (num) => {
              // 更新组件状态
              countB.value += num;
            };
            return {
              onClickAddA,
              onClickAddB,
              countA,
              countB,
            };
          },
        }).mount("#app");
      };
    </script>
  </head>
  <body>
    <div id="app">
      <!-- 绑定函数 实现点击加1的效果-->
      <p><button @click="onClickAddA">点击加1</button> {{countA}}</p>
      <!-- 绑定函数，并传入参数2 实现点击加2的效果 -->
      <p><button @click="onClickAddB(2)">点击加2</button> {{countB}}</p>
    </div>
  </body>
</html>

页面实现效果如下图所示：

总结

本节介绍了 Vue 中用于事件处理的指令 v-on 的用法。通过 v-on 可以简单地绑定JS表达式，或者绑定函数以实现更复杂的逻辑。这使得我们能够响应用户的交互，从而实现页面的动态效果，提升了用户体验。