# Vue2（理解框架思想）

这部分只解决一个问题：你能不能从“手写 DOM”切换到“数据驱动视图”的思维方式，并理解 Vue2 为什么能让页面开发更高效。

## 学完后你应该掌握

- Vue2 是什么，为什么说它是渐进式框架
- `new Vue()`、`el`、`data`、`methods` 的基础写法
- 模板插值 `{{ }}`
- `v-bind` 和 `v-on`
- `v-model` 做表单双向绑定，包括文本、单选和复选
- `v-if`、`v-show`、`v-for`、`:key`
- `computed` 和 `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()`
- `el`
- `data`
- `methods`

### 模板与指令

- `{{ }}`
- `v-bind`
- `v-on`
- `v-model`
- `radio`
- `checkbox`
- `v-if`
- `v-else`
- `v-show`
- `v-for`
- `:key`

### 响应式进阶

- `computed`
- `watch`
- `:class`
- `:style`

### 生命周期

- `created`
- `mounted`
- `updated`
- `beforeDestroy`
- `destroyed`

### 组件通信

- 组件注册（全局 / 局部）
- `props`
- `props` 校验
- `$emit`
- `slot`
- `ref`
- 综合页面组织能力

## 学习顺序

1. Vue 实例和数据绑定
2. 模板语法和事件绑定
3. 表单双向绑定
4. 条件渲染和列表渲染
5. `computed` 和 `watch`
6. 动态类名、样式和事件交互
7. 生命周期和异步更新
8. 组件通信
9. 综合课程管理面板

## 练习目录

- [01-vue-instance-and-data/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/01-vue-instance-and-data/README.md)
- [02-template-bindings/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/02-template-bindings/README.md)
- [03-v-model-and-form/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/03-v-model-and-form/README.md)
- [04-conditional-and-list-rendering/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/04-conditional-and-list-rendering/README.md)
- [05-computed-and-watch/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/05-computed-and-watch/README.md)
- [06-class-style-and-event/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/06-class-style-and-event/README.md)
- [07-lifecycle-and-async/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/07-lifecycle-and-async/README.md)
- [08-components-communication-and-final/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/08-components-communication-and-final/README.md)
- [09-final-course-dashboard/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/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 个组件开始，不要一上来拆太细