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/09-final-course-dashboard/README.md

@@ -0,0 +1,44 @@
+# 练习 9：Vue2 综合课程管理面板
+
+## 目标
+
+把 Vue2 入门阶段最关键的能力串起来，完成一个带搜索、筛选、统计、组件通信的课程管理面板。
+
+## 你要练什么
+
+- `new Vue()`
+- `data`
+- `methods`
+- `computed`
+- `watch`
+- `v-model`
+- `v-if`
+- `v-show`
+- `v-for`
+- `:key`
+- `:class`
+- `props`
+- `props` 校验
+- `$emit`
+- `slot`
+- `ref`
+
+## 任务
+
+请基于页面结构完成以下操作：
+
+- 输入关键字过滤课程名称
+- 用下拉框切换“全部 / 已完成 / 学习中”
+- 点击按钮让搜索框获得焦点
+- 用子组件渲染每一项课程
+- 子组件通过 `$emit` 通知父组件切换完成状态
+- 没有匹配结果时显示空状态
+- 页面底部显示总数、已完成数、当前筛选数
+- 在 `watch` 里输出关键字变化日志
+
+## 文件
+
+- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/09-final-course-dashboard/starter.html)
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/09-final-course-dashboard/starter.js)
+- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/09-final-course-dashboard/answer.html)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/09-final-course-dashboard/answer.js)