数据绑定与事件处理

数据绑定和事件处理是 Vue 3 开发中的核心技能，它们共同实现了用户界面与逻辑的交互。数据绑定让视图与数据保持同步，而事件处理则允许用户通过操作触发逻辑。本节将深入讲解 Vue 3 中的数据绑定方式（单向绑定与双向绑定）以及事件处理机制，通过示例展示如何构建动态、交互式的应用。

数据绑定

Vue 3 提供了多种数据绑定方式，确保视图能够实时反映数据的变化。

1. 单向数据绑定

单向绑定将数据从 JavaScript 传递到模板，通常通过插值表达式或 v-bind 实现。

示例：插值绑定

<template>
  <p>消息：{{ message }}</p>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('欢迎使用 Vue 3');
    return { message };
  }
};
</script>
  • 效果：页面显示“消息：欢迎使用 Vue 3”，当 message 改变时，视图自动更新。
  • 原理：Vue 的响应式系统（后续章节详解）检测数据变化并刷新 DOM。

示例：属性绑定

使用 v-bind（简写为 :）将数据绑定到 HTML 属性：

<template>
  <input :placeholder="placeholderText" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const placeholderText = ref('请输入内容');
    return { placeholderText };
  }
};
</script>
  • 效果：输入框的占位符显示“请输入内容”。

2. 双向数据绑定

双向绑定通过 v-model 实现，不仅将数据绑定到视图，还允许用户输入更新数据。常用于表单元素。

示例：文本输入

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名" />
    <p>你输入的用户名是：{{ username }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const username = ref('');
    return { username };
  }
};
</script>
  • 效果：用户在输入框中输入内容，<p> 标签实时显示输入值。
  • 原理：v-model 是 v-bind:value 和 v-on:input 的语法糖，自动同步数据。

示例：选择框

<template>
  <div>
    <select v-model="selectedFruit">
      <option value="">选择水果</option>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
    </select>
    <p>你选择的水果是：{{ selectedFruit }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedFruit = ref('');
    return { selectedFruit };
  }
};
</script>
  • 效果：用户选择下拉选项时，selectedFruit 更新并显示。

修饰符

v-model 支持修饰符增强功能：

  • .lazy：在 change 事件而非 input 事件时更新。
  • .number：将输入转换为数字。
  • .trim：去除首尾空格。
<template>
  <input v-model.trim="text" placeholder="输入并去除空格" />
</template>

事件处理

Vue 3 使用 v-on（简写为 @）监听 DOM 事件，并调用方法处理用户交互。

1. 基本事件监听

示例：按钮点击

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
};
</script>
  • 效果：点击按钮时，count 加 1，页面同步更新。
  • 写法：@click="increment" 调用 increment 方法。

2. 带参数的事件处理

可以将参数传递给事件处理函数：

<template>
  <button @click="addNumber(5)">加 5</button>
  <p>结果：{{ total }}</p>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const total = ref(0);
    const addNumber = (num) => {
      total.value += num;
    };
    return { total, addNumber };
  }
};
</script>
  • 效果：点击按钮，total 增加 5。

3. 访问事件对象

通过 $event 访问原生 DOM 事件对象：

<template>
  <input @input="logInput($event)" placeholder="输入并查看日志" />
</template>

<script>
export default {
  setup() {
    const logInput = (event) => {
      console.log('输入内容：', event.target.value);
    };
    return { logInput };
  }
};
</script>
  • 效果：输入时，控制台打印输入值。

4. 事件修饰符

Vue 提供事件修饰符简化常见操作：

  • .stop：阻止事件冒泡。
  • .prevent：阻止默认行为。
  • .once：事件只触发一次。
  • .enter：监听回车键。
<template>
  <div @click="outerClick">
    <button @click.stop="innerClick">点击我（阻止冒泡）</button>
    <form @submit.prevent="submitForm">
      <input @keyup.enter="submitForm" placeholder="按回车提交" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  setup() {
    const outerClick = () => console.log('外层被点击');
    const innerClick = () => console.log('内层被点击');
    const submitForm = () => console.log('表单提交');
    return { outerClick, innerClick, submitForm };
  }
};
</script>
  • 效果：
    • 点击按钮只触发 innerClick，不冒泡到外层。
    • 表单提交不刷新页面，按回车也能提交。

综合示例

结合数据绑定和事件处理，创建一个简单的登录表单：

<template>
  <div>
    <h2>登录</h2>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="login">登录</button>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const error = ref('');

    const login = () => {
      if (username.value && password.value) {
        console.log('登录成功:', { username: username.value, password: password.value });
        error.value = '';
      } else {
        error.value = '请填写用户名和密码';
      }
    };

    return { username, password, error, login };
  }
};
</script>

<style scoped>
div {
  max-width: 300px;
  margin: 20px auto;
}
input {
  display: block;
  margin: 10px 0;
  padding: 5px;
}
button {
  padding: 5px 20px;
}
p {
  color: red;
}
</style>
  • 效果：输入用户名和密码后点击登录，若为空则显示错误提示，否则打印登录信息。

总结

数据绑定和事件处理是 Vue 3 构建交互式应用的基石。单向绑定通过 v-bind 实现数据到视图的同步，双向绑定通过 v-model 实现表单交互，而 v-on 则为用户操作提供响应能力。掌握这些基础后，你可以轻松创建动态页面。下一节将深入组件开发，进一步扩展你的 Vue 3 技能！

Last Updated::