- 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.
练习 9:Vue2 综合课程管理面板
目标
把 Vue2 入门阶段最关键的能力串起来,完成一个带搜索、筛选、统计、组件通信的课程管理面板。
你要练什么
new Vue()datamethodscomputedwatchv-modelv-ifv-showv-for:key:classpropsprops校验$emitslotref
任务
请基于页面结构完成以下操作:
- 输入关键字过滤课程名称
- 用下拉框切换“全部 / 已完成 / 学习中”
- 点击按钮让搜索框获得焦点
- 用子组件渲染每一项课程
- 子组件通过
$emit通知父组件切换完成状态 - 没有匹配结果时显示空状态
- 页面底部显示总数、已完成数、当前筛选数
- 在
watch里输出关键字变化日志