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.
45 lines
1.2 KiB
Markdown
45 lines
1.2 KiB
Markdown
# 练习 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)
|