3435848495
- Implement dynamic styles and event handling in Vue2 with a card component. - Create lifecycle methods exercise to simulate async data loading and instance destruction. - Develop a component communication exercise with props, events, and slots. - Build a comprehensive course management dashboard with filtering, statistics, and component interactions.
159 lines
4.9 KiB
Markdown
159 lines
4.9 KiB
Markdown
# 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 个组件开始，不要一上来拆太细
|