Files
front-end-example/07-vue2/09-final-course-dashboard
charlie 3435848495 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.
2026-03-23 10:09:29 +08:00
..

练习 9Vue2 综合课程管理面板

目标

把 Vue2 入门阶段最关键的能力串起来,完成一个带搜索、筛选、统计、组件通信的课程管理面板。

你要练什么

  • new Vue()
  • data
  • methods
  • computed
  • watch
  • v-model
  • v-if
  • v-show
  • v-for
  • :key
  • :class
  • props
  • props 校验
  • $emit
  • slot
  • ref

任务

请基于页面结构完成以下操作:

  • 输入关键字过滤课程名称
  • 用下拉框切换“全部 / 已完成 / 学习中”
  • 点击按钮让搜索框获得焦点
  • 用子组件渲染每一项课程
  • 子组件通过 $emit 通知父组件切换完成状态
  • 没有匹配结果时显示空状态
  • 页面底部显示总数、已完成数、当前筛选数
  • watch 里输出关键字变化日志

文件