Vue2（理解框架思想）
这部分只解决一个问题：你能不能从“手写 DOM”切换到“数据驱动视图”的思维方式，并理解 Vue2 为什么能让页面开发更高效。
学完后你应该掌握
- Vue2 是什么，为什么说它是渐进式框架
new Vue()、el、data、methods的基础写法- 模板插值
{{ }} v-bind和v-onv-model做表单双向绑定，包括文本、单选和复选v-if、v-show、v-for、:keycomputed和watch的基本区别:class和:style的动态绑定- 生命周期里的
created、mounted、updated、beforeDestroy、destroyed - 组件、
props、props校验、$emit - 插槽
slot ref的基本用法- 如何把这些能力组合成一个 Vue2 小页面
这一章在解决什么
Vue2 不是教你再多学一套“新语法”，而是帮你把页面开发的思路改掉。
它回答的是：
- 页面内容为什么应该由数据决定
- 一个点击事件为什么不一定要手动改 DOM
- 一段重复结构为什么应该交给
v-for - 一块页面为什么应该拆成组件
- 父组件和子组件之间怎么传数据和传事件
必须建立的 6 个核心意识
1. 视图应该跟着数据走
不是先找 DOM 再改内容，而是先改数据，让页面自动更新。
2. 指令是模板和数据之间的桥
像 v-bind、v-on、v-model、v-if、v-for 这些指令，本质上是在描述“数据怎么影响页面”。
3. 计算属性更适合“基于已有数据得出结果”
如果一个值可以从别的数据推导出来，优先考虑 computed。
4. watch 更适合“监听变化后做副作用”
比如发请求、写日志、同步别的状态。
5. 组件化不是拆文件，而是拆职责
一个组件只关心一块明确的界面和交互。
6. 父子通信是 Vue 开发主线
- 父组件通过
props往下传数据 - 子组件通过
$emit往上通知事件
全部知识点清单
基础认知
- Vue2 渐进式框架
- 数据驱动视图
- 声明式渲染
实例基础
new Vue()eldatamethods
模板与指令
{{ }}v-bindv-onv-modelradiocheckboxv-ifv-elsev-showv-for:key
响应式进阶
computedwatch:class:style
生命周期
createdmountedupdatedbeforeDestroydestroyed
组件通信
- 组件注册（全局 / 局部）
propsprops校验$emitslotref- 综合页面组织能力
学习顺序
- Vue 实例和数据绑定
- 模板语法和事件绑定
- 表单双向绑定
- 条件渲染和列表渲染
computed和watch- 动态类名、样式和事件交互
- 生命周期和异步更新
- 组件通信
- 综合课程管理面板
练习目录
- 01-vue-instance-and-data/README.md
- 02-template-bindings/README.md
- 03-v-model-and-form/README.md
- 04-conditional-and-list-rendering/README.md
- 05-computed-and-watch/README.md
- 06-class-style-and-event/README.md
- 07-lifecycle-and-async/README.md
- 08-components-communication-and-final/README.md
- 09-final-course-dashboard/README.md
过关标准
如果你能独立做到下面这些，就说明这一章已经基本过关：
- 能写出一个基础 Vue2 实例
- 能用模板语法展示数据
- 能用
v-model处理输入 - 能用
v-model处理单选框和复选框 - 能用
v-if、v-show、v-for组织页面 - 能分清
computed和watch - 能写出基础组件并使用
props/props校验 /$emit - 能理解插槽和
ref的常见用途 - 能知道 Vue 实例销毁前后会经过哪些生命周期
- 能完成一个带组件通信的小页面
学习建议
- 学 Vue2 时先不要急着记所有 API，先抓住“数据变，页面跟着变”这条主线
- 遇到页面不更新时，先看是不是数据没有改到
- 遇到组件通信问题时，先分清“数据往下传”还是“事件往上抛”
- 学组件时先从 2 个组件开始，不要一上来拆太细