Lecture05-v-model 双向绑定

管理员
2026-10-17
前端-框架工具
63
0
文章目录

    [toc]

    单词词性音标含义
    v-model-/ˈviː ˈmɒdl/双向绑定指令，等价于 :value 绑定 + @input 回填
    bindingn./ˈbaɪndɪŋ/绑定，把数据与视图关联起来
    two-wayadj./ˌtuː ˈweɪ/双向的，输入框和数据两个方向自动同步
    inputn./ˈɪnpʊt/输入框，v-model 最典型的用武之地
    checkboxn./ˈtʃekbɒks/复选框，用 v-model 绑定时得到的是布尔值
    selectn./sɪˈlekt/下拉选择框，用 v-model 绑定选中的值
    emitv./iˈmɪt/触发（事件），组件上用它配合 props 实现双向绑定

    Lecture05-v-model 双向绑定

    1、本节讲什么

    学会 v-model——让"输入框的值"和"数据"双向同步的简写。这是表单开发里用得最多的写法（第 20 节做表单全靠它）。

    2、概念速览

    什么是双向绑定：一个输入框，你输入它变了 → 数据跟着变；数据变了 → 输入框跟着变。两个方向自动同步，不用你手动写"取回值 / 回填"。

    v-model 的本质：它是一句简写，等价于":value 绑定 + @input 事件回填"。你写 v-model="name"，Vue 帮你做这两件事。

    正确 vs 误区：双向绑定只用于表单这类交互（input、checkbox、select）。组件之间传数据用的是单向的 props/事件（第 16 节），不是双向。

    3、先看效果

    在输入框打字，下面的文字实时同步：

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

<template>
  <!-- 输入框内容一变，name 就变；name 一变，输入框就变 -->
  <input v-model="name" placeholder="输入名字" />
  <p>你输入的是：{{ name }}</p>
</template>

    4、照着做

    1. 替换 App.vue，在输入框打字，看下面的文字实时同步。
    2. 试试不同类型的控件：
    <input type="checkbox" v-model="agree" />   <!-- 勾选 → 布尔 -->
<select v-model="city">                       <!-- 下拉 → 选中值 -->
  <option value="sz">深圳</option>
  <option value="gz">广州</option>
</select>
    1. 理解"数据驱动视图"：你其实在改 name/agree/city 这些数据，页面自动跟着变。

    5、常见疑问

    • Q：v-model 和 @click 冲突吗？ A：不冲突。v-model 只管"值同步"，@click 管"事件"。一个输入框既能 v-model 绑值，也能 @keyup.enter 监听回车。
    • Q：能在自定义组件上用 v-model 吗？ A：能。组件内部用 props 收 modelValue、用 emit('update:modelValue', 新值) 实现——这就是"组件上的双向绑定"。用到再查，先会用表单的。
    • Q：那 provide / inject 呢？用不到了吗？ A：provide/inject 是"爷爷传数据给孙子、跳过中间层"的进阶写法，用得少。现在主流做法是：局部用 props/事件，全局共享用 Pinia（第 18 节）。provide/inject 知道有这回事即可，用到再查。

    6、规范要点

    • 表单值一律用 v-model 绑，别手动写 :value + @input 绕弯子。
    • v-model 只用于表单交互；组件间传数据还是走 props/事件，别滥用双向。
    • 变量命名清晰（name、city），别起 a、b，让 AI 生成的代码你能一眼看懂。

    7、本节验证

    • 能说清双向绑定：输入框变了数据变、数据变了输入框变 ✅
    • 会用 v-model 绑定 input / checkbox / select ✅
    • 知道 v-model 本质是 :value + @input 的简写 ✅
    • 清楚 v-model 只用于表单交互，组件间传数据仍走 props / 事件 ✅
    end