feat: add Vue2 exercises for dynamic styles, lifecycle methods, component communication, and course management dashboard

- 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.

07-vue2/README.md

@@ -0,0 +1,158 @@
+# 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 个组件开始，不要一上来拆太细