Vue 快速上手与指令（上）（一）

本页对应 Vue 快速上手与指令（上），共 7 段视频，约 1 小时 14 分。

学习目标

• 能够用自己的话说明 Vue 是“用于构建用户界面的渐进式框架”，并解释“构建用户界面”“渐进式”“框架”三个关键词的含义。
• 能够独立完成 Vue 的基本使用步骤：准备唯一容器、引入 Vue 文件、创建 Vue 实例，并通过 el 指定挂载点、通过 data 定义并展示数据。
• 能够使用插值表达式 {{ }} 渲染变量、简单表达式和三元运算结果，并判断给定写法是否违反“数据必须存在、只能写表达式不能写语句、不能用作标签属性值”三项注意事项。
• 能够通过修改 Vue 实例上的数据观察页面自动更新，并据此解释响应式特性和“数据驱动视图”思想。
• 能够安装并配置 Vue 开发者调试工具，在控制台中查看和修改 Vue 实例数据，并验证页面随数据变化自动更新。
• 能够识别以 v- 开头的内置指令，正确使用 v-html 解析并渲染 HTML 标签内容，同时对比说明其与插值表达式在标签解析和覆盖原内容方面的差异。

知识点

本节要解决的问题

本节笔记只有四点：前端必备技能、岗位多、提高开发效率、高薪必备技能（Vue2+Vue3）。它要回答的不是“Vue 语法怎么写”，而是“为什么要花时间学 Vue”。转写稿里反复强调：Vue 是三大框架里当前招聘中非常常见的一项，课程后面会同时覆盖 Vue2 和 Vue3，所以这一节要先建立学习动机和路线判断。下面按笔记四点展开，每点都按“为什么需要 → 怎么想 → 怎么做 → 易错点”来讲。

1. 前端必备技能

为什么需要： 找前端工作时，框架能力不是加分项，而是常见门槛。转写稿提到三大框架要会，至少会两个更好，Vue 属于“必会”级别。
怎么想： 不要把它理解成“多学一个库”，而要理解成“企业项目需要你具备框架开发能力”。实际演示中用招聘网站检索，看到岗位要求里明确写 Vue，这就是从需求端反推学习优先级。
怎么做： 先确认自己目标是就业，再把 Vue 放进主学习线；课程安排里 Vue2 核心精讲、Vue3 项目、TypeScript 结合项目都会出现，说明不是只学一个语法点。
易错点： 不要把“听过 Vue”当成“会 Vue”。转写稿里提醒“一听就懂、一写就错”，所以必须跟案例、作业、项目练，不能只背笔记。

2. 岗位多，绝大多数互联网公司都在使用 Vue

为什么需要： 学习内容要和岗位需求匹配。转写稿里提到，往届学生找工作回来反馈，公司里用 Vue 的不少；南方 React 可能多一些，北方也有 React，但 Vue 的岗位占比很重要。
怎么想： 不要只问“哪个框架最强”，要问“我所在地区、目标公司、招聘 JD 里写什么”。用招聘网站举例，是为了让“学 Vue”有现实依据，而不是凭感觉。
怎么做： 自己也可以做一次小验证：打开招聘网站搜“前端 Vue”，看岗位描述里的 Vue2/Vue3、TypeScript、项目经验要求；再对照课程安排，把基础语法、组件、路由、状态管理、项目串起来。
易错点： 不要把“Vue 岗位多”理解成“只学 Vue 就够”。转写稿明确说 React 也要接触，三大框架会两个更好；Vue 是重点，但不是唯一。

3. 提高开发效率

为什么需要： 企业开发看的是交付效率。转写稿中用“小黑记事本”案例说明：添加、删除、合计、清空等功能，用 Vue 写时真正写业务的地方不多，很多是括号和结构，代码量明显减少。
怎么想： Vue 的效率来自“数据驱动视图”：数据改了，页面自动更新，不需要像原生 DOM 那样先 querySelector 找元素再改内容。转写稿还讲了插值表达式、响应式、开发者工具调试，这些都是效率来源。
怎么做： 学习时不要只抄代码，要观察“数据在哪、页面哪里用了它、改数据后页面怎么变”。实际中通过控制台输出 Vue 实例，展开看到 name、age、friend 等数据挂到实例上，再改 app.name、app.age，页面自动更新，这就是调试和验证过程。
易错点： 不要把“效率高”当成“可以不学原理”。转写稿提醒，使用框架要遵循它的语法规则；插值表达式只能放表达式，不能放 if、for 这类语句；双大括号也不能直接当标签属性值用。否则一写就报错。

4. 高薪必备技能（Vue2+Vue3）

为什么需要： 只学 Vue2 或只学 Vue3 都不够贴合项目现实。转写稿里讲得很清楚：Vue3 是趋势，性能比 Vue2 强约 1.2 到 2 倍，压缩体积更小，对 TypeScript 支持更好；但很多老项目已经用 Vue2 做了一半，不能随便改成 Vue3，所以 Vue2 仍要学。
怎么想： 正确判断不是“二选一”，而是“Vue2 打基础、看老项目；Vue3 跟趋势、做新项目”。转写稿还提到 Vue2 发布时间长、文档和生态更完备，遇到业务问题更容易搜到方案；Vue3 较新，但底层重构、TS 支持好。
怎么做： 按课程路线学：先掌握 Vue2 核心语法和案例，再进入 Vue3 与 TypeScript、项目实战；遇到老项目能读懂 Vue2，遇到新项目能上手 Vue3。调试时可用 Vue 开发者工具查看数据、修改数据，观察页面响应式更新。
易错点： 不要因为 Vue3 是新趋势就跳过 Vue2；也不要因为 Vue2 稳定就拒绝 Vue3。转写稿里“官方不再维护 Vue2”不等于“不能用”，而是提醒你：老项目仍存在，新项目看趋势，两者都要有准备。

把四点串成一句话

学 Vue 的逻辑是：岗位需要它 → 项目大量使用它 → 它能提升开发效率 → 所以要同时准备 Vue2 和 Vue3。转写稿里的招聘网站检索、代码量对比、控制台改数据、开发者工具调试，都是围绕这条逻辑展开的。学习时抓住“数据驱动视图”这条主线，比死记语法更容易把后面的插值表达式、响应式、指令和项目串起来。

Vue是什么：先拆开一句官方定义

Vue 读音是 /vjuː/，类似英文 view。官方给它的定义是：一套用于构建用户界面的渐进式框架。Vue2 官网是 https://v2.cn.vuejs.org/。

为什么需要先看定义？ 因为后面所有学习都围绕三个关键词展开：构建用户界面、渐进式、框架。怎么想？ 不要一上来背 API，先把这句话拆成三块，知道 Vue 解决什么问题。怎么做？ 打开官网确认官方描述，再分别理解三个关键词。易错点： Vue 不是“VE”“VOE”“微有”，也不是一个普通工具函数集合；它是一个框架，后面会讲框架和库的区别。

构建用户界面：基于数据把页面渲染出来

所谓“构建用户界面”，说白了就是做页面，更准确地说，是基于数据渲染出用户可以看到的界面。

为什么需要？ 前端核心工作之一就是把数据展示到页面上。转写稿中提醒：不用 Vue 也能做，比如以前拿到数据后通过字符串拼接、操作 DOM 把内容放到页面里，但这种写法做多了很繁琐。Vue 让“数据到页面”的过程更巧妙、更方便。怎么想？ 把思路从“我手动找元素、改内容”转成“我准备数据，页面按数据展示”。怎么做？ 先理解页面里要展示哪些数据，再让 Vue 把这些数据渲染到指定容器中。易错点： 构建用户界面不是把页面写死，也不是一上来就大量操作 DOM；它的重点是“数据”和“界面”的对应关系。

渐进式：学一点用一点

“渐进式”就是循序渐进，不一定非得把 Vue 中所有 API 都学完才能开发，可以学一点开发一点。

为什么需要？ 如果必须全部学完才能用，学习门槛会很高，也不利于边学边练。怎么想？ 把 Vue 看成一整套可以按需取用的能力：今天学声明式渲染，就先用它做小案例；后面学组件系统、路由、状态管理，再逐步用到项目里。转写稿中也举例：第三天学组件系统就可以用组件，第六天学路由就可以用路由，第九天学状态管理再继续加。怎么做？ 笔记给出两种开发方式：1. Vue 核心包开发，场景是局部模块改造；2. Vue 核心包 & Vue 插件 & 工程化，场景是整站开发。易错点： 渐进式不是“功能不完整”，也不是“只能做小项目”；它强调的是学习路径和接入方式可以循序渐进。

框架：毛坯房与装修

所谓框架，就是一套完整的解决方案。笔记里的比喻很形象：如果把完整项目比作装修好的房子，那么框架就是“毛坯房”，我们只需要在毛坯房基础上增加功能代码。

为什么需要？ 框架已经搭好大部分结构和规则，能大大提高开发效率，开发者不用从零搭所有东西。怎么想？ 先分清“库”和“框架”：库类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts 等；框架是一套完整解决方案，实现了大部分功能，我们只需按一定规则编码。怎么做？ 学框架重点就是学它的规则和约束。转写稿中强调：用 Vue 就得遵循 Vue 的语法，不按语法写就会报错。易错点： 框架不等于库；不能把框架当工具箱随便调用；使用框架必须接受它的规则。

总结：四个问题要能答出来

Vue 是什么？ 一套用于构建用户界面的渐进式框架。什么是构建用户界面？ 基于数据渲染出用户可以看到的界面，说白了就是做页面、把数据展示到页面上。什么是渐进式？ 循序渐进，学一点用一点，不必等所有 API 学完才开发；可以核心包局部改造，也可以核心包加插件和工程化做整站。什么是框架？ 一套完整的解决方案，像毛坯房一样搭好架子，开发者按规则补充功能代码；它不同于工具箱式的库。

易错点汇总： 读音和拼写要准确；不要把“渐进式”理解成“功能少”；不要把“框架”和“库”混为一谈；学框架首先要守规则。

从“数据怎么变成页面”开始

Vue 的核心能力之一，是基于数据渲染用户界面。也就是说，我们不再用字符串拼接或大量 DOM 操作把数据塞进页面，而是准备好数据，让 Vue 帮我们渲染。

比如笔记图中的 msg，要渲染成右侧页面，就需要走“创建 Vue 实例”的流程。转写稿里反复强调：Vue 是“构建用户界面的渐进式框架”，落到这一节，就是先把容器、Vue 包、实例和配置项准备好。

为什么需要：没有 Vue 实例，data 和页面之间没有桥梁。
怎么想：页面要有地方展示数据，Vue 要知道把数据挂到哪里。
怎么做：按 4 步走——准备容器、引包、创建实例、指定 el 和 data。
易错点：不要一上来就写插值表达式，先确认容器和 Vue 包都已就绪。

第一步：准备容器

为什么需要：数据最终要展示到某个元素内部，这个元素就是挂载点。
怎么想：先写一个 div，给它一个 id，通常叫 app。
怎么做：

<div id="app"></div>

易错点：容器 id 要和后面 el 的选择器一致；容器要写在实例挂载前；数据只会渲染到这个容器内部，写到容器外通常不生效。

第二步：引入 Vue 包

为什么需要：浏览器本身不认识 Vue 的语法，必须先加载 Vue 文件。
怎么想：笔记里写了“开发版本/生产版本”。学习阶段用开发版本，便于看警告和调试；上线用生产版本，体积更小。转写稿里还提到可以本地引入，也可以用官网提供的 CDN 方式引入。
怎么做：

<!-- 学习阶段引入开发版本，路径按素材或官网地址填写 -->
<script src="vue.js"></script>

易错点：路径写错会加载失败；引入顺序要在自己写的实例代码之前，否则会报 Vue is not defined。转写稿里口误的“BOE/未有”，指的都是 Vue。

第三步：创建 Vue 实例

为什么需要：new Vue() 是 Vue 工作的入口，配置项都交给这个实例。
怎么想：转写稿用 axios 传配置对象作类比：new Vue({...}) 也是传入一个配置对象。
怎么做：

const app = new Vue({
  // 配置项稍后补
})

易错点：Vue 的 V 是大写；建议用变量接收实例，方便后面在控制台调试。转写稿中就是通过 app 查看和修改数据的。

第四步：指定 el 和 data

为什么需要：el 告诉 Vue“挂到哪里”，data 提供“要展示什么数据”。
怎么想：el 是 element 的缩写，写选择器；data 是数据对象，里面声明页面要用的变量。
怎么做：

<div id="app">
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>朋友：{{ friend.name }} - {{ friend.sex }}</p>
</div>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      name: '老汤',
      age: 30,
      friend: {
        name: '琪琪',
        sex: '女'
      }
    }
  })
</script>

易错点：el: '#app' 不能漏掉 #；页面中使用的数据要存在于 data 中，否则会报错；data 里可以放字符串、数字、对象、数组等。转写稿里“差值表达式”是口误，准确叫插值表达式，即双大括号 {{ }}，作用是把数据插入页面。

用控制台验证实例与响应式

转写稿中创建实例后，在控制台输出 app，展开可以看到 name、age、friend 等数据都挂到了实例对象上；再执行：

app.name = 'YYDS'
app.age = 15

页面中用到这些数据的地方会自动更新，这就是 Vue 的响应式特性。为什么需要：理解“改数据，页面自动更新”，后面就少做 DOM 操作。易错点：修改数据要通过实例属性访问，如 app.name；如果数据没在 data 中声明，插值使用时会报错。

本节总结

创建 Vue 实例的 4 步是：准备容器 → 引包 → new Vue() 创建实例 → 指定 el 挂载点和 data 数据。先让最小示例跑起来，再在控制台观察实例和响应式变化，是这一节最稳的练习方式。

插值表达式是什么

插值表达式是 Vue 模板语法中最基础、最常用的一种写法：用双大括号 {{ }} 把数据“插入”到页面中。笔记里给了一张渲染效果图：

转写稿里反复提到“差值表达式”，这里要纠正为“插值表达式”；因为它长得像胡子，也有人叫“胡子语法”，但专业叫法还是插值表达式。

为什么需要：我们写页面时，经常要把 JS 中的数据展示到标签中间。传统做法是找 DOM、改 innerHTML 或 textContent，代码多且容易漏。
怎么想：Vue 的思路是“数据驱动视图”，模板里先占好位置，数据变了，页面自动更新。
怎么做：在容器内的标签中间写 {{ 数据或表达式 }}。
易错点：插值只能写在标签“中间”，不能写在标签属性里。

作用：利用表达式进行插值，渲染到页面中

为什么需要：插值不只是展示一个变量名，还希望做简单计算、判断、取对象属性、调用函数，让模板更灵活。
怎么想：只要一段代码能被求值、能算出一个结果，就可以放进插值表达式。笔记中说明：表达式是可以被求值的代码，JS 引擎会将其计算出一个结果。
怎么做：以下情况都是表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

易错点：if、for 这类是语句，不是表达式，不能直接写进 {{ }}。转写稿中演示了 name.toUpperCase() 把姓名转大写、age >= 18 ? '成年' : '未成年' 做三元判断，以及 obj.name 取对象属性，都是合法写法。

语法：{{ 表达式 }}

为什么需要：掌握固定语法，才能把 data 里的数据准确渲染到指定位置。
怎么想：Vue 实例通过 el 指定容器，通过 data 提供数据；模板中用双大括号读取这些数据。
怎么做：语法是 {{ 表达式 }}，笔记代码如下：

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

易错点：双大括号要写在容器内部；变量名要和 data 中保持一致。转写稿中演示时，先准备 #app 容器，再 new Vue({ el: '#app', data: { ... } })，页面里写 {{ name }} 就能显示对应值。

错误用法与调试过程

为什么需要：插值表达式很常用，但边界很清楚，写错就会报错或不生效。
怎么想：先检查数据是否在 data 中提供，再检查写的是表达式还是语句，最后检查是否误写到了标签属性上。
怎么做：笔记列出三类错误用法：

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

转写稿中把 {{ hobby }} 写进模板，但 data 中没有 hobby，刷新后控制台报错；这说明插值使用的数据必须先在 data 中声明。还强调：title="{{ username }}" 这种属性写法不行，属性值不能直接用双大括号插值。

易错点：不要拿“页面没显示”直接猜 Vue 坏了，先看控制台报错；不要写 {{ if }}；不要把插值写到 src、title 等属性位置。

小结

1. 插值表达式的作用：把 Vue 提供的数据或表达式结果插入到页面中。
2. 语法：{{ 表达式 }}，里面可以写变量、运算、三元、对象属性、数组下标、函数调用等。
3. 注意事项：数据必须在 data 中提供；只能写表达式，不能写 if、for 等语句；只能在标签中间使用，不能用于标签属性。

什么是响应式：先看它解决什么问题

响应式简单理解就是：数据变，视图对应变。这里的“视图”就是页面。以前没有响应式时，数据从服务器拿回来以后，我们往往要通过 document.querySelector 找到元素，再改 innerHTML 或文本内容，这就是 DOM 操作。数据一多，哪里用到这个数据，就要手动改哪里，很容易漏改。

Vue 的响应式把这件事反过来了：我们不用盯着页面改，而是盯着数据改。数据一改，页面中用到这个数据的地方会自动更新。所以学这一节，先建立一个思路：数据是源头，视图是结果；修改数据，页面自动跟着变。转写稿里反复强调“数据驱动视图”，说的就是这个意思。

怎么想：data 中的数据最终会挂到实例上

要修改数据，先要知道数据在哪里、怎么访问。data 中定义的数据，最终会被添加到 Vue 实例对象上。也就是说，data 里写了 uname、age、friend，实例上就能通过 app.uname、app.age、app.friend 访问到。

所以笔记里给出两个核心动作：

// 访问数据
实例.属性名

// 修改数据
实例.属性名 = "值"

这里的“实例”就是 new Vue() 得到的对象。实际写代码时，建议用一个变量接住它，比如 let app = new Vue({...})。这样后面在控制台调试、在代码里修改数据都方便。转写稿里也提到：一开始不接收返回值也能跑，但为了验证响应式，“还真得弄一个变量接收一下”。

怎么做：访问、修改并观察页面自动更新

先看一个精简结构。data 中准备要展示的数据：

let app = new Vue({
  el: '#app',
  data: {
    uname: '老汤',
    age: 30,
    friend: {
      name: '琪琪'
    }
  }
})

页面上通过插值表达式把数据展示到容器 #app 里面。此时可以这样访问和修改：

app.uname          // 访问 uname
app.uname = 'YYDS' // 修改 uname
app.age = 15       // 修改 age
app.friend.name = '齐' // 修改对象中的属性

修改后不需要手动找页面元素，页面会自动更新。比如页面里用 uname 展示姓名，执行 app.uname = 'YYDS' 后，姓名位置会自动变成 YYDS；如果页面里根据 age 做三元判断显示“成年/未成年”，把 age 改成 15，页面会自动显示“未成年”；friend.name 改成“齐”，用到朋友姓名的地方也会更新。

调试时可以这样验证：打开浏览器控制台，输入 app 并展开，能看到实例上除了 $ 开头的一些 Vue 内置属性外，还有 uname、age、friend 等我们自己声明的数据。然后输入 app.uname = 'YYDS' 回车，观察页面是否自动变化；再输入 app.age = 15，观察依赖 age 的显示是否变化；最后改 app.friend.name，观察对象属性是否也能驱动页面更新。这个过程就是在验证响应式。

易错点：别把“改数据”做成“改页面”

第一，页面中使用的数据必须存在于 data 中。属性名拼错、数据没声明，访问或渲染就会出问题。第二，修改要通过实例对象，比如 app.uname = 'YYDS'，不要又回到手动改 DOM 的老路。第三，数据要展示在指定容器内部，写到容器外面不会按预期生效。第四，访问对象里的属性要继续用点语法，如 app.friend.name，不要漏掉层级。

小结：记住两件事

一是什么是响应式：数据更新，页面自动更新。开发时就可以把注意力放在业务数据上，而不是频繁操作 DOM。二是如何访问和修改 data 中的数据：data 中的数据最终会加到实例上，通过“实例.属性名”访问，通过“实例.属性名 = 值”修改。改完数据，页面自动变，这就是响应式最直观的体验。

课件图示

代码示例

代码1：创建 Vue 实例的四个步骤（容器 → 引包 → new Vue → el/data）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 使用步骤</title>
</head>
<body>
  <!-- 1. 准备容器：以后数据只能渲染到这个 div 内部 -->
  <div id="app">
    <p>姓名：{{ uname }}</p>
    <p>年龄：{{ age }}</p>
    <p>朋友姓名：{{ friend.name }}</p>
    <p>朋友性别：{{ friend.sex }}</p>
  </div>

  <!-- 2. 引包：CDN 方式引入线上的 vue.js（必须写在下面自己的 JS 之前） -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    // 3. 创建 Vue 实例（V 大写）
    const app = new Vue({
      // 4. 指定配置项
      el: '#app',        // el：挂载点，告诉 Vue 数据展示到哪个元素里
      data: {            // data：提供数据，字符串、数字、对象、数组都可以
        uname: '老汤',
        age: 30,
        friend: {
          name: '琪琪',
          sex: '女'
        }
      }
    })
  </script>
</body>
</html>

关键行与易错点

• el: '#app' 里的 #app 必须和容器的 id="app" 完全一致，写错就渲染不出来（转写稿：“你这叫 APP，所以下边这块必须是井号 APP”）。
• 插值只能写在容器内部，写在 div#app 外面不生效。
• 引包的 <script src> 必须放在自己的 <script> 前面，否则 new Vue 会报 Vue is not defined。
• new Vue 的 V 要大写；实例对象建议用变量接收（const app = ...），后面响应式演示要用到它。

---

代码2：插值表达式 {{ }} 的合法写法与错误写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>插值表达式</title>
</head>
<body>
  <div id="app">
    <!-- 1. 直接渲染变量 -->
    <p>{{ uname }}</p>

    <!-- 2. 变量调方法（表达式） -->
    <p>{{ uname.toUpperCase() }}</p>

    <!-- 3. 三元运算符（表达式） -->
    <p>{{ age >= 18 ? '成年' : '未成年' }}</p>

    <!-- 4. 对象点属性 -->
    <p>{{ friend.name }}</p>

    <!-- 5. 算数运算 -->
    <p>{{ money + 100 }}</p>

    <!-- 6. 调用函数，拿到返回值 -->
    <p>{{ fn() }}</p>

    <!-- ❌ 错误1：hobby 没有在 data 中提供，控制台报错 -->
    <!-- <p>{{ hobby }}</p> -->

    <!-- ❌ 错误2：if / for 是语句，不是表达式，不能写在插值里 -->
    <!-- <p>{{ if }}</p> -->

    <!-- ❌ 错误3：插值表达式不能用在标签属性上 -->
    <!-- <p title="{{ uname }}">我是P标签</p> -->
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        uname: '老汤',
        age: 30,
        money: 100,
        friend: {
          name: '琪琪',
          sex: '女'
        }
      },
      methods: {
        fn () {
          return '我是函数的返回值'
        }
      }
    })
  </script>
</body>
</html>

关键行与易错点

• 插值表达式里放的是能被求值的表达式：money + 100、price >= 100 ? '真贵' : '还行'、obj.name、arr[0]、fn() 都可以。
• 易错点一：用到的数据必须在 data 里声明过，{{ hobby }} 会直接报错。
• 易错点二：只能写表达式，不能写语句，{{ if }}、{{ for }} 都不行。
• 易错点三：不能写在标签属性上，<p title="&#123;&#123; username &#125;&#125;"> 是错误写法，属性绑定要用指令（如 v-bind），不是插值。

---

代码3：响应式特性——改数据，页面自动更新（不操作 DOM）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>响应式特性</title>
</head>
<body>
  <div id="app">
    <p>{{ uname }}</p>
    <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
    <p>{{ friend.name }}</p>
    <button id="btn">改数据（不操作 DOM）</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        uname: '老汤',
        age: 30,
        friend: {
          name: '琪琪',
          sex: '女'
        }
      }
    })

    // data 里的数据最终都会被添加到实例上，所以可以这样访问/修改：
    // 控制台里直接写：app.uname  /  app.uname = 'YYDS'  /  app.age = 15
    console.log(app)

    document.getElementById('btn').addEventListener('click', () => {
      // 只改数据，不做任何 DOM 操作
      app.uname = 'YYDS'
      app.age = 15
      app.friend.name = '齐'
    })
  </script>
</body>
</html>

关键行与易错点

• 响应式：数据变化，视图自动更新。点击按钮后 老汤 → YYDS、成年 → 未成年、琪琪 → 齐 全部自动刷新。
• 结论：data 中定义的所有数据最终会被添加到 Vue 实例上，所以访问用 app.属性名，修改用 app.属性名 = 值。
• 易错点：别再用 document.querySelector(...).innerHTML = ... 这种 DOM 操作，改数据就够了——这就是“数据驱动视图”的思想。
• 页面里用到某个数据的地方会全部自动更新，不管用了几次、是不是调用了方法或三元运算。

常见错误

1. 页面不渲染，控制台报 Vue is not defined
   → 原因：未引入 Vue 文件，或引入顺序/路径错误。
   → 修法：先引入 vue.js，再写 new Vue()；检查路径与文件名。

2. el 挂载失败，数据不显示
   → 原因：容器选择器与 el 不一致，或插值写在挂载容器外。
   → 修法：确认容器存在且 el: '#app' 与 id="app" 一致；插值只能写在挂载容器内部。

3. 插值表达式报错或页面异常
   → 原因：使用了 data 中未声明的数据，或在 {{ }} 中写 if/for 等语句。
   → 修法：先在 data 中声明；{{ }} 内只写可求值表达式，不写语句。

4. 把插值表达式写到标签属性里
   → 现象：如 title="{{name}}" 不生效。
   → 原因：{{ }} 不能作为属性值使用。
   → 修法：属性绑定应使用 Vue 指令语法，不能用插值表达式代替。

5. 修改数据后页面不更新
   → 原因：修改的是普通变量，而不是 Vue 实例上的数据属性。
   → 修法：通过实例访问和修改，如 app.name = '新值'，不要只改变量本身。

6. 想渲染 HTML 标签却原样显示
   → 原因：使用 {{ }} 时按文本输出，不解析标签。
   → 修法：确需解析 HTML 时使用 v-html；同时注意它会覆盖元素原内容。

练习

1. 创建 Vue 实例，在 data 中提供 name、age，页面展示姓名和年龄，并验证修改实例数据后页面自动更新。

2. 使用插值表达式完成：姓名转大写、年龄是否成年判断、对象属性展示、函数返回值展示各一处。

3. 写一个对比案例：同一段带标签的字符串，分别用 {{ }} 和 v-html 渲染，观察差异。

4. 给出一个包含 3 处错误的 Vue 小案例（容器 ID 不一致、使用未声明数据、属性中使用插值），要求找出并修正。

5. 安装并打开 Vue 开发者工具，在调试面板中修改 data 数据，记录页面响应式更新的结果。

原视频对照

#	视频	时长
1	课程概况（1-9）	17:45
2	Vue介绍（10-14）	09:31
3	使用Vue的步骤（15-17）	11:36
4	插值表达式（18-22）	08:16
5	响应式介绍（23-26）	10:16
6	开发者调试工具（27-29）	08:33
7	指令整体介绍和v-html（30-32）	08:41

小结

1. 创建 Vue 实例按“准备容器 → 引入 Vue → new Vue() → 配置 el/data”执行，顺序和选择器必须一致。
2. 插值表达式只能写在标签中间，内部放表达式，不能放语句，也不能当标签属性值。
3. data 中的数据会挂到 Vue 实例上，访问和修改应通过实例属性完成。
4. 响应式的核心表现是数据变化后视图自动更新，开发时应优先改数据而不是直接操作 DOM。
5. v-html 用于解析并渲染 HTML 内容，但会覆盖元素原有内容，使用时要谨慎。
6. Vue 开发者工具是排查数据和响应式问题的高效手段，安装后需确认可用。
7. 基础阶段最常见的排查顺序是：引入是否正确 → 挂载点是否匹配 → 数据是否声明 → 语法是否合规。