Vue3 | 事件绑定与双向数据绑定

作为接触 Vue3 一些时日的初学者，今天重新学习了事件绑定 和双向数据绑定这两个核心基础知识点，它们是 Vue3 开发中最常用的交互能力，所以我把它整理成博客既方便自己复习，也希望能帮助到初入vue的小伙伴～

一、Vue3 事件绑定(v-on/@)

事件绑定是实现页面交互的基础，比如点击按钮、输入内容、按下键盘等操作，都需要通过事件绑定来触发对应的逻辑。Vue3 中主要通过 v-on 指令(缩写**@**)来实现。

1. 基本用法

v-on:事件名="处理函数" 可以简写为 @事件名 = "处理函数"，最常用的就是点击事件（click）。

<script setup lang="ts">
// 定义点击事件处理函数
function handleClick(e: Event) {
  console.log('按钮被点击了', e) // e是原生事件对象
}
</script>

<template>
  <!-- 完整写法 v-on:click -->
  <button v-on:click="handleClick">按钮</button>
  <!-- 简写 @click -->
  <button @click="handleClick">按钮（简写）</button>
</template>

2. 事件传参

如果需要给事件处理函数传自定义参数，同时还要获取原生事件对象，需要用 $event 显式传递：

<script setup lang="ts">
function click_01(name: string, e: Event) {
  console.log('点击者：', name, '事件对象：', e)
}
</script>

<template>
  <button @click="click_01('张三', $event)">带参数的点击</button>
</template>

3. 常用事件修饰符/特殊事件

Vue3 提供了很多便捷的事件修饰符，不用手动判断事件类型，直接绑定即可：

<template>
  <!-- 鼠标事件 -->
  <button @dblclick="() => console.log('双击')">双击事件</button>
  <button @click.right="() => console.log('右键')">右键事件</button>
  <button @click.middle="() => console.log('中键')">中键事件</button>

  <!-- 键盘/输入框事件 -->
  <!-- 按下enter键触发 -->
  <input @keydown.enter="(e) => console.log('enter键值：', e.target.value)" placeholder="按enter触发">
  <!-- 输入实时触发 -->
  <input @input="(e) => console.log('输入内容：', e.data)" placeholder="实时输入监听">
  <!-- 获取焦点/失去焦点 -->
  <input @focus="() => console.log('获取焦点')" placeholder="获取焦点触发">
  <input @blur="() => console.log('失去焦点')" placeholder="失去焦点触发">
</template>

---

二、Vue3 双向数据绑定(v-model)

双向数据绑定核心是：数据更新 → 视图自动更新；视图输入 → 数据自动更新 ，Vue3 中通过 v-model 实现，常用来绑定表单元素。

1. 前提:响应式数据

使用 ref( 简单类型)或 **reactive(**复杂对象)定义响应式数据，这是双向绑定的前提，示例：

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 简单类型响应式
const msg = ref('默认值')

// 复杂对象响应式
const user = reactive({
  name: '张三',
  age: 18,
  gender: true, // 性别：true-男，false-女
  like: [] // 爱好（复选框绑定数组）
})
</script>

2. 不同表单元素的v-model绑定

1) 文本输入框

直接绑定 ref/reactive 数据，实时同步输入内容:

<template>
  <input type="text" v-model="msg" placeholder="请输入内容">
  <div>输入的内容：{{ msg }}</div>
</template>

2) 数字输入框

用 .number 修饰符，自动将输入的字符串转为数字类型:

<template>
  <input type="number" v-model.number="user.age" placeholder="请输入年龄">
  <div>年龄：{{ user.age }}（类型：{{ typeof user.age }}）</div>
</template>

3) 单选框

绑定布尔值/固定值，实现单选互斥:

<template>
  <div>
    性别：
    <input type="radio" v-model="user.gender" :value="true">男
    <input type="radio" v-model="user.gender" :value="false">女
  </div>
  <div>选中的性别：{{ user.gender ? '男' : '女' }}</div>
</template>

4) 复选框

绑定数组，选中的选项会自动加入数组，取消则移除:

<template>
  <div>
    爱好：
    <input type="checkbox" v-model="user.like" value="羽毛球"> 羽毛球
    <input type="checkbox" v-model="user.like" value="篮球"> 篮球
    <input type="checkbox" v-model="user.like" value="足球"> 足球
  </div>
  <div>选中的爱好：{{ user.like }}</div>
</template>

3. 双向绑定原理 (来尝试手搓一个)

v-model 本质是**v-bind:value(数据→视图) + v-on:input(视图→数据)** 的语法糖，手动实现如下

<script setup lang="ts">
import { ref } from 'vue'
const text = ref("")

// 监听input事件，更新数据
function inputHandler(e: InputEvent) {
  text.value = (e.target as HTMLInputElement).value
}
</script>

<template>
  <!-- 手动绑定value + 监听input -->
  <input placeholder="手动实现双向绑定" @input="inputHandler" :value="text">
  <div>手动绑定的内容：{{ text }}</div>
</template>

---

三、总结

1. 事件绑定核心是**@事件名** ，传参用**$event**获取原生事件对象，修饰符能简化事件判断；
2. 双向绑定**v-model** 是语法糖，底层是 value 绑定 + input 事件监听；
3. ref 适合绑定简单类型，**reactive**适合复杂对象，是 Vue3 响应式的基础。