Vue介绍与Vue的特点（Lesson1 1/4）

本页对应 Lesson01，共 6 段视频，约 1 小时 2 分。

学习目标

能够用自己的话说明 Vue 是渐进式框架及其核心职责是视图渲染，并列举 Vue 周边库、环境配置方式及开发版与生产版的区别。
能够分别用原生 JavaScript、React、Vue 实现“输入框内容同步显示到 div”的示例，并指出三者在操作 DOM 方式上的差异。
能够写出 new Vue({ el, data, methods }) 的基本结构，解释 Vue 实例、配置对象、data 与 methods 的作用。
能够说明 data 中的属性为何会成为 Vue 实例属性，并通过修改 data 或实例属性验证二者同步变化。
能够正确引入 vue.js 并挂载 Vue 实例，说明 el 选择器的作用、挂载元素作为 Vue 模板的规则，以及在模板中直接使用实例属性/方法时 this 的指向。
能够识别挂载到 body、html 或使用 class/标签选择器挂载时可能带来的问题，并说明推荐使用 #root 等唯一 ID 挂载的原因。

知识点

框架与 Vue 的定位

为什么需要：先弄清“框架是什么”，后面才不会把 Vue 当成一堆语法死记。转写稿里反复纠正“刀模/大目/当线”，实际都是 DOM/视图渲染：框架的核心职责是帮我们把数据呈现到页面，并在数据变化时更新视图。

怎么想：React 里我们改数据，页面跟着变，并没有手动操作 DOM；Vue 也一样。Vue 是一套用于构建用户界面的渐进式框架。渐进式的意思是：核心先解决视图渲染；需要路由就引入路由库，需要状态管理再引入对应方案，像盖房子先打地基，再按需加窗户、装修。转写稿还提到 Vue 读音接近 “view”，不要读成“唯有 E”；作者是尤雨溪。Vue 2 到 Vue 3 有 API 和部分能力调整，学习时以当前文档和课堂版本为准。

怎么做：把 Vue 先理解为“数据驱动视图”的框架；本节先用 script 引入开发版，跑通基本语法，后面再学脚手架和原理。

易错点：不要把“渐进式”理解成“功能少”；它是“按需引入”。也不要把 React 和 Vue 对立起来，二者都能做同一类事，差别在写法与生态。

引入 Vue：安装方式与版本选择

为什么需要：同一套 Vue 可以通过不同方式引入，选错会影响调试和上线。

怎么想：转写稿讲了直接 script、CDN、NPM 打包。练习阶段用本地 vue.js 开发版最稳；CDN 可做原型，但生产项目不建议把关键依赖交给外部 CDN，否则对方服务不可用会影响项目；NPM 手工打包本节不用，后面有脚手架。开发版包含完整警告和调试信息，生产版会压缩、去掉提示，体积更小。

怎么做：把下载好的 vue.js 放到 lab 目录，用相对路径引入：

html

<script src="./lab/vue.js"></script>

易错点：练习时误用生产版，出错提示少；引入顺序和路径写错，后面 new Vue 会报未定义；不要记成“CDN 绝对不能用于练习”，而是生产慎用。

同一个输入同步：原生 JS、React、Vue 对比

为什么需要：理解框架到底替我们做了什么，最直观的方法是对比“输入框内容同步到 div”。

怎么想：原生 JS 要自己获取 input 和 div、绑 input 事件、手动改 innerHTML；React 用状态驱动，value 配 onChange；Vue 用 v-model 和插值表达式。转写稿强调：原生代码只操作 DOM，不会自动改数据；数据变视图、视图变数据要靠框架机制。

怎么做：原生简化代码如下：

html

<div id="root">
  <input id="ipt">
  <div id="box"></div>
</div>
<script>
  const ipt = document.querySelector('#root input')
  const box = document.querySelector('#root div')
  ipt.value = '我是一只小小鸟'
  box.innerHTML = ipt.value
  ipt.addEventListener('input', e => {
    box.innerHTML = e.target.value
  })
</script>

Vue 写法：

html

<div id="root">
  <input v-model="str">
  <div>{{ str }}</div>
</div>
<script src="./lab/vue.js"></script>
<script>
  new Vue({
    el: '#root',
    data: { str: '我现在要开始学习 Vue' }
  })
</script>

易错点：原生示例里只改 DOM 不改数据；React 函数组件只能有一个根元素，多标签要包裹；受控输入要 value + onChange，defaultValue 只在初次渲染起作用；Vue 里 el 写错，页面不会按模板编译。

Vue 实例、data 与 methods

为什么需要：Vue 应用从 new Vue 生成实例开始，配置对象决定数据、方法和挂载位置。

怎么想：new Vue({...}) 的返回值一般叫 vm，它是 Vue 实例；配置对象里的 data 是数据，methods 是方法。转写稿说“data 对象的属性会作为 vm 的实例属性”，所以模板里能直接用 str。方法建议放 methods，数据和逻辑分开，阅读性更好。调试时可输出 vm 查看 str，改 vm.str 视图会变；用 v-model 改输入，vm.str 也会变，这就是双向绑定。

怎么做：

const vm = new Vue({
  el: '#root',
  data: { str: 'hello' },
  methods: {
    fn() { console.log(this.str) }
  }
})

易错点：模板中通常不写 this，Vue 编译时会从实例上找；写 this.str 也可以，但没必要。若在模板写 vm.str，而 vm 没定义在实例数据里，会报未定义。方法里的 this 指向 Vue 实例；不要把方法随意塞进 data，虽然能写，但不建议。

挂载与模板编译

为什么需要：Vue 实例必须挂到某个元素上，才能把该元素范围当作模板解析。

怎么想：el 是 element 的简写，指定挂载元素。推荐 el: '#root'，也可写 document.querySelector('#root')。挂载后，该元素内部就是 Vue 模板，能解析 {{ }} 和指令；没挂载时，双花括号只是普通文本。转写稿调试时 el 写错位置，修正后才生效。

怎么做：HTML 给 <div id="root">...</div>，JS 写 el: '#root'。模板里直接写 {{ str }}。

易错点：不建议用 body、html 作挂载元素，页面中可能有第三方脚本或插件内容被影响；也不建议用 class 或标签选择器，因为可能匹配多个元素。el 写错、选择器不匹配，是最常见的“怎么没效果”原因。

为什么先认官网

为什么需要： 学习 Vue 第一步不是急着写业务代码，而是先找到可信的资料入口。转写稿里一开始就强调：Vue 是帮助前端做视图渲染的框架，读音是 Vue，不要读成“唯有E”；语音识别里出现的“will/vi”也要按 Vue 理解。官网就是确认“它是什么、怎么安装、当前学哪一版”的起点。

怎么想： 先把官网当成“版本地图”。本节笔记给了三个入口：英文官网、中文官网、Vue2中文官网。学习时先确认自己跟的是 Vue3 还是 Vue2，不要中英文页面来回跳、版本混着看。转写稿里说的“渐竞式/渐定式”应纠正为“渐进式”，意思是先用地基，再按需加路由、状态管理等能力，不是把所有功能一次性揉进一个文件。

怎么做： 按笔记原样记住三个地址：

英文官网：http://vuejs.org
中文官网：https://cn.vuejs.org
Vue2中文官网：https://v2.cn.vuejs.org

先打开中文官网，点“起步/安装”一类入口看介绍；需要对照英文时再开英文官网；如果课程或项目明确用 Vue2，再进 Vue2 中文官网，避免把 Vue3 的写法抄到 Vue2 里。

易错点： 不要把“官网”只当成收藏夹里的链接。转写稿里打开中文官网后，是去看“介绍、安装、起步”这些页面，而不是只看首页。另一个易错点是版本混用：Vue2 和 Vue3 的入口不同，学哪版就盯哪版。

从官网确认安装方式

为什么需要： 官网的安装页会告诉你有哪些引入方式。转写稿里提到直接 script 引入、CDN、npm 打包等方案。先看清方案，才知道学习阶段该用哪一种。

怎么想： 学习阶段目标是“先把基本语法跑起来”，所以转写稿建议从 script 引入开始：把 Vue 的库引入页面，再逐步过基本语法。CDN 虽然方便，但转写稿明确说不建议在正式项目里随便用第三方 CDN，因为一旦对方服务不可用，项目可能跑不起来；npm 打包能用，但后面课程会有自己的脚手架，学习初期不必先绕进去。

怎么做： 打开官网安装页，先确认“直接通过 script 引入”的写法；把下载好的 Vue 文件放到本地目录，例如转写稿里说的 lab/lib 一类库目录，再在页面里按顺序引入。转写稿还提到 Vue 不支持 IE8 以下浏览器，这个只需知道，不必在入门时展开。

易错点： 转写稿里“CBN/CPN”应纠正为 CDN；“read/right/reite”应纠正为 React。不要因为 CDN 一行就能跑，就把它当成正式项目方案。还有，引入本地文件时路径要写对，转写稿专门提醒过 ./、../、站点根目录的区别。

开发版与生产版怎么选

为什么需要： 官网下载入口通常会给开发版和生产版。转写稿里说得很清楚：开发版包括完整的警告和调试模式，生产版去掉提示并压缩，体积约 37.5KB。学习时如果误用生产版，出错后控制台提示会少很多。

怎么想： 练习阶段要“看得见错误”，所以用开发版；上线阶段面向用户，用户看不懂警告，也没必要把调试信息暴露出去，所以用生产版。这不是语法差异，而是使用场景差异。

怎么做： 在官网下载或引入时认准开发版；转写稿里也是把开发版放进 lab 供课堂练习。等以后真正上线，再换成生产版。若控制台没有预期警告，先检查是不是拿错了版本。

易错点： 不要把“生产版体积小”误解成“学习也用生产版”。转写稿中开发版有完整警告和调试模式，这正是入门调试需要的。另一个易错点是下载后文件名看混，建议在目录里明确标注开发版/生产版。

官网示例到本地调试的提醒

为什么需要： 官网示例看起来短，但配置对象层级、挂载点、数据位置一错就不生效。转写稿里演示 Vue 时，一开始 el 写错位置，页面没有按预期工作，后来把 el 放回 new Vue({...}) 配置对象里才正常。这个调试过程说明：官网示例要看清“谁在谁里面”。

怎么想： 先分清 el 是挂载元素，data 是数据，methods 是方法。转写稿里“对塔/啲头”应纠正为 data，“mas/咩”应纠正为 methods，“挂的”应纠正为“挂载”，“EL/ER”应纠正为 el。官网示例不要凭记忆抄，要按配置对象的结构抄。

怎么做： 打开官网示例时，先找 new Vue({...}) 这一层，再看 el、data、methods 分别放在哪里；本地跑不通时，先看控制台警告，再检查挂载点是否存在、标签是否闭合、引入顺序是否正确。转写稿里 React 示例也出现过“组件只能一个根元素”“标签要闭合”的问题，这类基础检查同样适用于 Vue 入门调试。

易错点： 不要把 el 写到配置对象外面；不要以为页面有双花括号就一定会被 Vue 解析——只有被 Vue 挂载的模板才会按 Vue 模板处理。转写稿里还提到模板中可直接使用实例属性，但学习阶段先按官网和课堂示例写，别急着省略 this 或混用原生 DOM 思路。

Vue 是什么：先抓住“框架的职责”

为什么需要： 初学框架最容易背概念，却不知道框架到底替我们做什么。转写稿里反复强调：框架不是玄学，它的基本职责就是帮助前端做 DOM 渲染。
怎么想： 先别急着记“渐进式”三个字，先理解：原生 JS 要自己获取元素、监听事件、改 innerHTML；React、Vue 这类框架帮你把“数据呈现到页面”这件事接管了。
怎么做： 记住本节笔记的定义：Vue 读音 /vjuː/，类似 view，是一套用于构建用户界面的渐进式框架，作者是尤雨溪。不要读成“Vue E”。
易错点： 不要把 Vue 神化成“不用学 DOM”。转写稿演示原生 JS 时，若只改 input 不写 input 事件，div 不会跟着变——这不是框架问题，是代码没写，称为“意念变长”。理解框架前，先知道它替代了哪些手动操作。

什么叫“渐进式”：按需引入，不是功能少

为什么需要： 很多项目只需要视图渲染，不需要路由、状态管理；如果框架把所有功能塞进一个 JS，代码会变重。
怎么想： 把 Vue 核心当地基：先做视图渲染；需要路由再引路由库，需要数据存储再引对应方案。转写稿用盖房子比喻：先打地基，再按需加窗户、加装修。
怎么做： 练习阶段先只引入 vue.js 核心文件，把基本语法过一遍；后续再逐层加模块。
易错点： “渐进式”不等于“功能弱”或“只能做小项目”，而是核心与周边库解耦、按需组合。也不要以为 Vue 和 React 水火不容：转写稿说，React 能做的事 Vue 基本也能做，反过来也类似，区别在于知识点和实现方式。

与 React 的比较：都做视图，但内置程度不同

为什么需要： 你已接触 React，比较能帮助迁移理解。
怎么想： React 通常要引入 react 和 react-dom，再创建根、渲染组件；Vue 引入核心文件后，用 new Vue({...}) 接管一块 DOM。转写稿提到 Vue 给开发者提供的内置能力更多，学习点也更多；Vue2 到 Vue3 又在不断做减法。
怎么做： 学 Vue 时遇到相似概念就对比：React 有根元素、组件、状态；Vue 有挂载元素、实例、data、模板语法。
易错点： 不要因为 Vue 初看简单就跳过原理；也不要把 React 的“组件必须一个根元素”等规则硬套到 Vue 的所有写法上。

安装与引入：练习先用 script 引入开发版

为什么需要： 页面要先“认识”Vue，才能 new Vue。
怎么想： 转写稿梳理了几种方式：CDN、NPM、直接下载 vue.js。练习阶段最直观的是把 vue.js 放到本地 lab 或 lib 目录，用 script 引入；NPM 后续配合脚手架更常见。
怎么做： 下载开发版，放到本地目录，例如：

html

<script src="./lab/vue.js"></script>

开发版包含完整警告和调试信息；生产版会压缩、去掉调试提示，体积更小。转写稿提到生产版约 37.5KB。
易错点： 路径别写错；练习用开发版，上线用生产版；不建议生产项目直接依赖公共 CDN——转写稿的理由是：第三方服务一旦不可用，你的项目可能跑不起来。NPM 也不是本节练习的第一步。

Vue 实例与挂载：让 Vue 接管一块 DOM

为什么需要： Vue 要渲染视图，必须知道“在哪渲染、用什么数据渲染”。
怎么想： new Vue 生成 Vue 实例，通常叫 vm；配置对象里 el 指定挂载元素，data 放数据，methods 放方法。
怎么做： 转写稿中的演示可简化为：

html

<div id="root">
  <input v-model="str">
  <div>{{ str }}</div>
</div>
<script src="./lab/vue.js"></script>
<script>
new Vue({
  el: '#root',
  data: { str: '我正在学习Vue' }
})
</script>

data 中的属性会成为 Vue 实例属性；模板中可直接写 {{ str }}，不需要写 this。
易错点： el 写错位置会不生效；不建议挂到 body、html 上，因为页面里可能有第三方脚本；选择器建议用 #root，不建议用 class 或标签名，容易匹配多个。模板里写 VM.str 前，VM 必须已在实例数据中定义，否则会报未定义。

双向绑定初体验：数据变视图变，视图变数据变

为什么需要： 原生 JS 演示中，input 和 div 同步要手动取元素、绑事件、改内容；Vue 用指令和插值简化。
怎么想： v-model 是双向绑定指令，{{ }} 是插值表达式；它们由 Vue 编译模板后处理。
怎么做： 用上面的代码，修改输入框，下面 div 跟着变；在控制台改 vm.str，视图也变。
易错点： 不要把 v-model 和 {{ }} 混为一谈；也不要误以为“数据变视图变”是自动魔法——后面要学原理。转写稿提醒：先会用、记住特点，再研究属性拦截和手写实现，别在语法都不会时硬啃原理。

从“框架到底帮我们做什么”理解 Vue

学 Vue 之前，先别急着背概念。转写稿里反复强调：框架最核心的职责，是帮助前端完成视图渲染，也就是把数据呈现到页面上，并在数据变化时更新页面。原生 JS 操作 DOM 时，我们要先拿到 input、再拿到 div，然后手动写事件、手动赋值；React 和 Vue 则把这层“操作 DOM”的工作接管过去。所以理解 Vue 的特点，首先要建立这个判断：Vue 不是魔法，它首先是帮我们做视图渲染的框架。易错点是：很多同学看示例时觉得“功能怎么没实现”，其实代码没写逻辑，框架不会替你做业务；不要把“没写代码”误认为“框架失效”。

遵循 MVVM 模式

为什么需要 MVVM？因为原生 JS 里“数据”和“视图”是两套东西：你改 input.value，div 不一定变；你改数据变量，页面也不一定变。MVVM 的思路是把视图和数据进行关联，让开发者更多关注数据状态。怎么想？可以把 data 看成数据源，模板看成视图，Vue 实例负责中间的连接。怎么做？在模板里用插值表达式 {{ }} 显示数据，用 v-model 建立表单和数据的双向绑定。转写稿演示了：数据变，视图变；视图里输入变化，数据也变，这就是“双向绑定”的直观效果。易错点是：双向绑定不是所有场景都自动发生，v-model 主要用在表单控件上；普通文本展示仍用插值表达式。

渐进式框架：需要什么就引入什么

为什么叫“渐进式”？转写稿用盖房子打比方：先把地基搭好，想加窗户就加窗户，想装修就装修。Vue 的核心只解决视图渲染；如果项目需要路由，就引入路由库；需要状态管理，就引入 Vuex 一类方案。怎么想？不要把“渐进式”理解成功能少，而是“核心轻、能力可按需叠加”。怎么做？初学阶段先引入 vue.js，把基本语法跑通；后续再按项目需要加模块。易错点是：转写稿明确不建议生产项目直接依赖公共 CDN，因为一旦外部服务不可用，项目可能跑不起来；练习可以用，正式项目更应使用自己可控的资源或工程化方案。

编码简洁、体积小、运行效率高，适合移动/PC 端

为什么强调这些？因为 Vue 的目标是降低视图层开发成本：模板语法直观，数据绑定省去大量 DOM 操作代码。转写稿提到开发版包含完整警告和调试信息，生产版会压缩，体积可到约 37.5KB；练习用开发版，上线用生产版。怎么想？体积和调试能力要分场景：开发阶段需要警告，生产阶段需要更小体积。怎么做？学习时引入开发版，便于看错误提示；上线换生产版。易错点是：不要拿开发版的提示量判断生产体积；也不要把“体积小”理解成“项目不需要工程化”。

它本身只关注界面，也可以配合第三方库开发项目

为什么只关注界面？因为 Vue 的核心职责是视图渲染，不把路由、请求、状态管理等全部揉进一个文件。转写稿拿 React 对比：React 要把 React 和 ReactDOM 分开引入，Vue 也按需组合，这样不需要路由的项目就不会被迫引入路由。怎么想？把 Vue 当“视图层核心”，其他能力通过库或工程化补齐。怎么做？先掌握模板、实例、指令、数据绑定，再学路由和状态管理。易错点是：不要以为什么都能靠核心包解决；也不要因为 Vue 提供的东西多，就忽略模块拆分。

用最小示例看 Vue 如何接管 DOM

转写稿中的最小结构可以整理为：

html

<div id="root">
  <input v-model="str">
  <div>{{ str }}</div>
</div>

<script src="./lab/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      str: '我现在开始学习 Vue'
    }
  })
</script>

这段代码里，new Vue 生成 Vue 实例，el 指定挂载元素，data 存放数据，v-model 让输入框和 str 双向关联，{{ str }} 把数据显示到模板中。易错点：模板中可直接使用实例属性，通常不需要写 this；data 里的属性会成为实例属性；方法建议放到 methods 中，数据放 data，阅读性更好。挂载时不要选 body 或 html，转写稿明确说不建议，因为页面中可能有第三方脚本或插件，容易被影响。

本节小结

Vue 的特点是：遵循 MVVM，编码简洁，体积小、效率高，适合移动/PC 端；核心只关注界面，又能按需配合第三方库。学习时先抓住“视图渲染”和“渐进式”两个关键词，再用最小示例理解实例、挂载、数据和模板的关系。不要把框架当魔法，也不要在基础语法还不熟时死抠原理；先会用、会调试，再深入原理。

先把“Vue 核心”和“Vue 周边库”分开

Vue 的职责，用转写稿里最直白的话说：帮助前端做 DOM 渲染、做视图渲染。你改数据，页面跟着变；你在页面输入，数据也能跟着变。它不负责把路由、请求、全局状态、UI 组件全部塞进核心包里。于是就有了“渐进式框架”这个说法：核心先解决视图，需要路由就引入路由库，需要状态管理就引入状态管理库，需要请求就引入 axios，需要现成组件就引入 element-ui。

本节笔记列出的周边库要原样记住：

vue-cli（Vue 脚手架）
axios
vue-router（路由）
vuex（状态管理）
element-ui（UI 组件库）
……

为什么需要：如果所有功能都揉进一个 JS 文件，不需要路由的项目也会被迫加载路由，代码变大、边界变乱。
怎么想：像盖房子，地基是 Vue 核心，窗户、门、装修按需加。
怎么做：先学核心语法，再按项目需要引入周边库。
易错点：把周边库当成 Vue 核心；一上来全引入；把 Vue 读成“唯有/Vi有”，规范读法是 Vue。

周边库各自解决什么问题

vue-cli 是脚手架，用来搭工程、起开发服务、做构建。初学阶段先不用急着上手，后面会用脚手架把项目目录和依赖准备好。
axios 解决 HTTP 请求，不是 Vue 专属。怎么想：页面要拿后端数据，就用它发请求。易错点：以为引入 axios 就会自动渲染，请求回来后仍要把数据交给 Vue 的 data。

vue-router 解决页面切换和路径映射。为什么需要：单页应用不能只靠一个页面。怎么做：按路由配置路径与组件。易错点：把路由库和普通锚点跳转混为一谈。

vuex 解决跨组件共享状态。怎么想：多个组件都要读写的状态，集中管理。易错点：所有局部状态都塞进 vuex，反而复杂。

element-ui 是 UI 组件库。为什么需要：表格、弹窗、表单等不必从零写。怎么做：按文档引入组件。易错点：版本与 Vue 版本不匹配；只顾组件样式，忘了数据驱动。

从引入方式理解“渐进式”

转写稿里比较了几种方式：直接 script 引入、CDN、npm、脚手架。初学练习建议先把 Vue 下载到本地 lab 目录，用开发版引入；上线再用生产版。开发版包含警告和调试信息，生产版会压缩、去掉提示。CDN 可以了解，但不建议把公司项目生死绑在第三方 CDN 上：对方服务一旦不可用，项目可能跑不起来。

html

<script src="./lab/vue.js"></script>

易错点：路径写错；开发版和生产版混用；以为 CDN 一定稳定。

用一个小功能对比：原生 JS、React、Vue 操作 DOM

转写稿用“输入框内容同步到下面 div”做对比。原生 JS 要先取元素、赋初值、监听 input 事件：

const input = document.querySelector('#root input');
const div = document.querySelector('#root div');
let str = '我是一只小小鸟';
input.value = str;
div.innerHTML = str;
input.addEventListener('input', (e) => {
  div.innerHTML = e.target.value;
});

这段代码只改了 DOM，不会自动改数据。调试时如果发现“没变化”，先检查事件有没有写、选择器有没有取到。

Vue 的写法把“数据”和“视图”绑起来：

html

<div id="root">
  <input v-model="str">
  <div>{{ str }}</div>
</div>
<script src="./lab/vue.js"></script>
<script>
const vm = new Vue({
  el: '#root',
  data: { str: '我是一只小小鸟' }
});
</script>

v-model 做双向绑定：数据变视图变，视图变数据变；{{ str }} 是插值表达式。转写稿调试时曾把 el 写错位置，导致挂载不对，这提醒我们：先检查 el 是否指向正确元素。

Vue 实例、data、methods 与挂载

new Vue({...}) 生成 Vue 实例，通常叫 vm。配置对象里，el 指定挂载元素，data 放数据，methods 放方法。data 中的属性会成为实例属性，所以模板里可直接写 {{ str }}，不需要写 this；写 this.str 也能运行，但不建议。模板在浏览器呈现前会经过编译，Vue 会帮你处理 this 指向。

const vm = new Vue({
  el: '#root',
  data: { str: '开始学习 Vue' },
  methods: {
    fn() { console.log(this.str); }
  }
});

易错点：el 不要挂到 body、html 上，避免影响页面中其他脚本；数据放 data，方法放 methods；初学先记住“data 属性会作为 vm 实例属性”，原理后面再手写。挂载元素就是 Vue 模板，普通 HTML 里的 {{}} 不会被解析，只有挂载后的模板才会按 Vue 语法编译。

本节目标：先把 Vue 核心库拿到手

Vue 是渐进式框架，核心职责是帮我们做视图渲染、操作 DOM。所谓“渐进式”，可以理解为地基先搭好，需要路由就加路由库，需要状态管理就加状态库，不需要的功能不必一次性全塞进来。环境配置要解决的就是：先让页面里有一个可用的 Vue 核心库，后面才能 new Vue、挂载实例、写模板语法。

学习阶段建议先用“直接引入本地开发版”把基本语法跑通；CDN 和 NPM 先理解用途和风险。讲师演示时也是把下载好的 vue.js 放到 lab（库目录）里，再用 script 引入，打开控制台能看到开发版提示，修改实例数据后页面同步变化。

直接引入：学习阶段最稳的方式

为什么需要： 直接引入不依赖网络和构建工具，下载一个 vue.js 放到项目目录，用 script 引进来就能写代码，最适合刚开始练语法。怎么想： 先下载官方 Vue 2 的库文件，放到 lab 或 lib 这类库目录；练习用开发版，上线再用生产版。怎么做： 下载地址见笔记：

shell

# 下载地址
https://v2.cn.vuejs.org/v2/guide/installation.html

下载后把文件放到项目里，例如 lab/vue.js，页面中用 <script src="./lab/vue.js"></script> 引入。引入成功后写一个最小实例：new Vue({ el: '#root', data: { str: '...' } })，在控制台把 vm.str 改成新值，页面会跟着变，这说明开发版和挂载都正常。易错点： 路径写错、文件名写错，页面会找不到 Vue；开发版和生产版不要混用；生产项目不建议长期靠手工下载文件管理依赖，但学习阶段先用它把语法跑通。

CDN 引入：原型可用，生产慎用

为什么需要： CDN 不用下载文件，复制 script 地址就能用，适合做原型、临时练习。怎么想： CDN 会就近取资源，速度快；但公共 CDN 是第三方服务，如果服务不可用，你的项目也会受影响。讲师明确不建议公司生产项目依赖公共 CDN，除非公司有自己的 CDN。怎么做： 笔记给了开发版和生产版：

html

<!-- 开发环境版本，包含完整的警告和调试模式 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，删除了警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

练习时用开发版，能看到完整警告和调试信息；上线用生产版，删除警告并压缩，体积更小。易错点： 开发时误用生产版，出问题看不到警告；上线误用开发版，体积大且带调试信息；生产项目不要把公共 CDN 当成唯一依赖。

NPM 安装：知道它属于工程化方式

为什么需要： NPM 是工程化项目管理依赖的方式，后续用脚手架开发时，依赖会由脚手架和包管理器统一处理。怎么想： 本节练习不依赖 NPM，先理解命令即可，不要一上来就陷进构建工具。怎么做： 在项目目录执行：

shell

# 最新稳定版
$ npm install vue

安装后 Vue 会进入 node_modules，通常要配合模块化环境和打包工具使用，不是像 script 那样直接写个标签就完事。易错点： 没有项目目录或没有初始化包管理时直接安装，文件位置会混乱；安装完以为页面自动生效，其实还需要模块引入或脚手架配置；本节练习仍以本地 script 引入为主。

版本选择与调试：开发版、生产版要分清

为什么需要： 开发版包含完整警告和调试模式，能帮你定位模板、数据、挂载问题；生产版删除警告并压缩，体积约 37.5KB，给用户看不需要调试提示。怎么想： 练习和排查问题用开发版，部署上线换生产版。Vue 不支持 IE8 及以下浏览器，这一点知道即可。怎么做： 下载时选开发版；上线前换生产版；引入后打开控制台，看到开发模式提示是正常的。易错点： 把“有警告”当成代码一定错；把生产版拿去调试；忽略浏览器兼容范围。

小结：先跑通，再工程化

本节三种方式不是互相替代的关系：学习阶段用本地开发版直接引入，最快看到 Vue 的挂载、插值表达式和双向绑定效果；CDN 适合原型但生产慎用；NPM 属于后续工程化方式。先把 lab/vue.js 引入成功，能 new Vue、能挂载 #root、能在控制台改数据看视图变化，再进入下一节实例与模板语法。

课堂画面

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例

示例一：原生 JS 操作 DOM（input 输入，div 同步显示）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>原生 JS 操作 DOM</title>
</head>
<body>
  <div id="root">
    <input type="text" id="ip">
    <div id="box"></div>
  </div>

  <script>
    // 1. 先拿到要操作的 DOM 元素
    var ip  = document.querySelector('#root input');
    var box = document.querySelector('#root div');

    // 2. 设置初始值：同一个 str 分别赋给 input 和 div
    var str = '我是一只小小鸟，怎么飞也飞不高';
    ip.value = str;
    box.innerHTML = str;

    // 3. input 输入时，把输入框的值同步给下面的 div
    ip.addEventListener('input', function (e) {
      box.innerHTML = e.target.value;
      // 注意：str 这个“数据”并没有跟着变
    });
  </script>
</body>
</html>

要点解释与易错点：

document.querySelector('#root input') 拿到元素后才能操作，必须先获取再赋值，否则 ip 是 null。
ip.value 改的是表单元素的显示值，box.innerHTML 改的是标签内容，两行代码本质上只是“把同一个变量复制两份”。
事件类型用 input（一输入就触发），不是 change（要失焦/回车才触发）。
e.target 是触发事件的元素本身；若改成 function(){ this.value } 也可以，但箭头函数里 this 不是该元素。
最大的坑：视图变了，数据 str 不会变；数据 str 变了，视图也不会自动变。原生 JS 只操作 DOM，没有“数据驱动视图”。

示例二：Vue 操作 DOM（v-model 双向绑定 + 实例挂载）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 操作 DOM</title>
</head>
<body>
  <!-- Vue 模板（挂载元素） -->
  <div id="root">
    <input type="text" v-model="str">
    <div>{{ str }}</div>
    <p>{{ msg }}</p>
  </div>

  <!-- 引入 Vue 核心模块（练习用开发版，含完整警告和调试信息） -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    // new Vue 生成 Vue 实例，传入配置对象
    var vm = new Vue({
      el: '#root',            // 挂载元素
      data: {                 // 数据
        str: '我是一只小小鸟，怎么飞也飞不高',
        msg: '现在开始学习 Vue'
      },
      methods: {              // 方法建议统一放 methods
        say() {
          console.log(this.str)   // this 指向 vm 实例
        }
      }
    })
  </script>
</body>
</html>

要点解释与易错点：

new Vue({...}) 传入的必须是对象（配置对象），el、data、methods 都是它的属性。
el 指定挂载元素，可写 '#root'，等价于 document.querySelector('#root')；不建议用标签名或 class，更不能挂到 body、html 上。
data 里的属性会作为 vm 的实例属性，所以模板里写 {{ str }} 即可，不需要写 this.str（写 this 也能编译通过，但不建议）。
模板中能直接用的原因是 Vue 编译模板时做了处理；而 methods 里的 this 就是 Vue 实例。
v-model 是双向绑定：视图变 → 数据变，数据变 → 视图变，这正是原生 JS 那段做不到的。
易错点：el 写错（比如 e1）或挂载元素不存在时，模板不会生效，{{ str }} 会原样显示出来。

示例三：React 操作 DOM（受控组件，对比用）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>React 操作 DOM</title>
</head>
<body>
  <div id="root"></div>

  <!-- 引入顺序很重要：react → react-dom → babel -->
  <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    const { useState } = React;

    function App() {
      const [str, setStr] = useState('我是一只小小鸟，怎么飞也飞不高');

      return (
        // 组件只能有一个根元素
        <div>
          <input
            value={str}
            onChange={(e) => setStr(e.target.value)}
          />
          <div>{str}</div>
        </div>
      );
    }

    ReactDOM.render(<App />, document.querySelector('#root'));
  </script>
</body>
</html>

要点解释与易错点：

引入顺序不能乱：react 是基础，react-dom 依赖它，babel 用来在浏览器里编译 JSX。
写 JSX 的 script 标签必须加 type="text/babel"，否则浏览器把 <div> 当 HTML 解析直接报错。
组件（函数名）首字母必须大写，且 return 的内容只能有一个根元素，多标签要用一个父元素（或空标签）包起来。
useState 返回数组，解构得到 [值, 修改值的方法]；value={str} + onChange 构成受控组件，不写 onChange 会出现“只读”警告。
ReactDOM.render(组件, 容器) 指定渲染到哪个元素；如果用 React 18，则换成 createRoot(...).render(...)。
对比记忆：React 用 {} 插值，Vue 用 {{ }} 插值；React 里视图更新必须调用 setStr，不能直接改 str。

常见错误

1. 页面直接把 {{ str }} 原样显示出来

现象：浏览器上出现两对花括号和里面的变量名，而不是数据。
原因：el 写错位置（写到了挂载元素外面）、el 选择器没匹配上，或者压根忘了 new Vue——此时那块 HTML 只是普通 HTML，Vue 根本不会去编译它。
修法：确认 el 指向的元素包含模板内容；在控制台看是否有 Vue 的实例化报错；先用 console.log 打出实例，确认它真的创建成功了。

2. 引入的是生产版，出了问题一片空白、毫无提示

现象：改错代码后页面只是不渲染，控制台干干净净，排查全靠猜。
原因：引入了 vue.min.js / vue@2（生产版），警告和调试信息已被删除。
修法：学习和开发阶段一律引 vue.js 开发版；上线前再换成生产版，并注意两者体积差别（37.5KB 左右）。

3. 用公共 CDN 上线，某天项目突然白屏

现象：本地一切正常，线上某天打不开，且没有任何人提前通知你。
原因：cdn.jsdelivr.net 这类公共 CDN 是别人的服务，挂不挂、改不改路径不由你决定。
修法：把 vue.js 下载到自己的 lib 目录本地引用；公司有自建 CDN 就用自己的；公共 CDN 只用于练习和原型。

4. 模板里写 {{ VM.str }} 报“VM is not defined”

现象：控制台报未定义，或者页面上什么都不显示。
原因：VM 只是你 const VM = new Vue(...) 时起的变量名，它不在实例属性里，模板作用域中取不到。
修法：直接写 {{ str }}；确实要在模板里用，就得把 VM 作为 data 的一个属性塞进去——但这是绕路，不推荐。

5. 把 el 挂到 body 或 html 上

现象：控制台警告/报错，页面里其他脚本、第三方注入的东西表现异常。
原因：挂载点会被当成 Vue 模板接管，页面中 body 里的其他 <script> 和外部注入的节点都会被牵扯进去。
修法：单独给一个容器（如 <div id="app"></div>），把应用内容全放进去，el: '#app'。

6. 数据改了，视图没动

现象：VM.xxx = '新值' 之后页面纹丝不动。
原因：这个属性是实例创建之后才加上的，没被初始化时收集进响应式系统；或者你改的是 data 那个原始对象而视图引用的是别处。
修法：需要响应的字段，一律在 data 里提前声明好；先声明、后赋值。

7. new vue() 小写、data 里用箭头函数

现象：前者直接报错；后者 this 指向 window，取不到实例数据。
原因：Vue 是构造函数，大小写敏感；箭头函数不绑定自己的 this。
修法：new Vue({...}) 严格按大小写写；data 与 methods 里统一用普通函数。

练习

练习 1｜三种方式做同一件事 实现：一个 input 输入内容，下方 div 实时同步显示。分别用 ① 原生 JS ② React ③ Vue 各写一份，然后在每份代码旁标注一句：这个功能里，是谁在替你操作 DOM？ 写完后对比三份代码的行数和心智负担。

练习 2｜找错改错 给出下面这段代码，找出至少三处问题并说明理由：

html

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div>{{ msg }}</div>
<div id="app"><input></div>
<script>
  const vm = new vue({ data: { msg: 'hi' } })
</script>

（提示方向：版本选择、挂载点与模板的包含关系、构造函数的写法。）

练习 3｜双向绑定验证 建一个 data 里带 str 的实例，然后依次做三件事并记录现象： ① 控制台 VM.str = '新值'；② 在输入框里改内容，再 console.log(VM.str)；③ 实例创建完之后临时加一个 VM.newField = 1，观察视图是否更新，并解释为什么。

练习 4｜挂载点的四种写法 分别用 #id、.class、document.querySelector('#app')、标签名四种方式写 el，跑通后回答：为什么推荐 #id？为什么 body、.class、标签名都不建议？

练习 5｜渐进式怎么"渐" 假设你现在只做一个纯展示的商品列表页，不需要路由、不需要状态管理、不需要组件库。写出你会引入哪些文件、为什么不多引；再写出如果后面要加多页面跳转和购物车状态，你会各加什么库。用这个例子向别人解释什么叫"渐进式"。

原视频对照

#	视频	时长
1	VUE介绍	12:41
2	js操作DOM	09:12
3	React操作DOM	08:28
4	Vue操作DOM	03:56
5	Vue实例	12:40
6	挂载Vue实例	15:24

小结

框架的职责就一句话：帮你把数据渲染成视图，DOM 操作由框架代劳——原生 JS 时代你要自己 querySelector + 改 innerHTML，Vue/React 里你只改数据。
"渐进式"= 按需加载能力：核心只管视图渲染，路由、状态管理、UI 库都是按需追加的独立模块，不像早期方案那样全塞进一个文件。
引库是第一步，且顺序和版本都要盯：开发版用于调试、生产版用于上线；能本地引就别长期依赖公共 CDN。
new Vue({}) 得到实例，参数必须是配置对象，目前只需记住两个常用项：data 放数据，methods 放方法——数据和方法分开放，是为了可读性和后续的性能机制。
data 里的属性会挂到实例上，且 data 与实例之间是同一份数据的双向映射：改哪边另一边都变，这就是后面双向绑定的地基。
el 决定实例在哪个元素内生效，该元素内部的 HTML 就是 Vue 的模板；推荐 #id，禁止挂 body/html。
模板里不需要写 this，Vue 编译时会自动到实例作用域里找变量——但这恰恰说明模板的 this 指向实例，别在模板里塞实例变量名。
学习顺序别搞反：先会用到滚瓜烂熟，再回头看原理（响应式拦截、编译过程）。语法都没熟就啃源码，看不懂也没意义。

Vue介绍与Vue的特点（Lesson1 1/4） ​

学习目标 ​

知识点 ​

框架与 Vue 的定位 ​

引入 Vue：安装方式与版本选择 ​

同一个输入同步：原生 JS、React、Vue 对比 ​

Vue 实例、data 与 methods ​

挂载与模板编译 ​

为什么先认官网 ​

从官网确认安装方式 ​

开发版与生产版怎么选 ​

官网示例到本地调试的提醒 ​

Vue 是什么：先抓住“框架的职责” ​

什么叫“渐进式”：按需引入，不是功能少 ​

与 React 的比较：都做视图，但内置程度不同 ​

安装与引入：练习先用 script 引入开发版 ​

Vue 实例与挂载：让 Vue 接管一块 DOM ​

双向绑定初体验：数据变视图变，视图变数据变 ​

从“框架到底帮我们做什么”理解 Vue ​

遵循 MVVM 模式 ​

渐进式框架：需要什么就引入什么 ​

编码简洁、体积小、运行效率高，适合移动/PC 端 ​

它本身只关注界面，也可以配合第三方库开发项目 ​

用最小示例看 Vue 如何接管 DOM ​

本节小结 ​

先把“Vue 核心”和“Vue 周边库”分开 ​

周边库各自解决什么问题 ​

从引入方式理解“渐进式” ​

用一个小功能对比：原生 JS、React、Vue 操作 DOM ​

Vue 实例、data、methods 与挂载 ​

本节目标：先把 Vue 核心库拿到手 ​

直接引入：学习阶段最稳的方式 ​

CDN 引入：原型可用，生产慎用 ​

NPM 安装：知道它属于工程化方式 ​

版本选择与调试：开发版、生产版要分清 ​

小结：先跑通，再工程化 ​

课堂画面 ​

代码示例 ​

示例一：原生 JS 操作 DOM（input 输入，div 同步显示） ​

示例二：Vue 操作 DOM（v-model 双向绑定 + 实例挂载） ​

示例三：React 操作 DOM（受控组件，对比用） ​

常见错误 ​

练习 ​

原视频对照 ​

小结 ​

Vue介绍与Vue的特点（Lesson1 1/4）

学习目标

知识点

框架与 Vue 的定位

引入 Vue：安装方式与版本选择

同一个输入同步：原生 JS、React、Vue 对比

Vue 实例、data 与 methods

挂载与模板编译

为什么先认官网

从官网确认安装方式

开发版与生产版怎么选

官网示例到本地调试的提醒

Vue 是什么：先抓住“框架的职责”

什么叫“渐进式”：按需引入，不是功能少

与 React 的比较：都做视图，但内置程度不同

安装与引入：练习先用 script 引入开发版

Vue 实例与挂载：让 Vue 接管一块 DOM

双向绑定初体验：数据变视图变，视图变数据变

从“框架到底帮我们做什么”理解 Vue

遵循 MVVM 模式

渐进式框架：需要什么就引入什么

编码简洁、体积小、运行效率高，适合移动/PC 端

它本身只关注界面，也可以配合第三方库开发项目

用最小示例看 Vue 如何接管 DOM

本节小结

先把“Vue 核心”和“Vue 周边库”分开

周边库各自解决什么问题

从引入方式理解“渐进式”

用一个小功能对比：原生 JS、React、Vue 操作 DOM

Vue 实例、data、methods 与挂载

本节目标：先把 Vue 核心库拿到手

直接引入：学习阶段最稳的方式

CDN 引入：原型可用，生产慎用

NPM 安装：知道它属于工程化方式

版本选择与调试：开发版、生产版要分清

小结：先跑通，再工程化

课堂画面

代码示例

示例一：原生 JS 操作 DOM（input 输入，div 同步显示）

示例二：Vue 操作 DOM（v-model 双向绑定 + 实例挂载）

示例三：React 操作 DOM（受控组件，对比用）

常见错误

练习

原视频对照

小结