# 练习 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)