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/starter.js

@@ -0,0 +1,79 @@
+Vue.component("level-badge", {
+  props: {
+    level: {
+      type: String,
+      default: "基础",
+    },
+  },
+  template: `<span class="badge">{{ level }}</span>`,
+});
+
+const CourseItem = {
+  props: {
+    course: {
+      type: Object,
+      required: true,
+    },
+  },
+  template: `
+    <article class="course-card" :class="{ 'is-done': course.finished }">
+      <div class="meta">
+        <level-badge :level="course.level"></level-badge>
+        <strong>{{ course.title }}</strong>
+      </div>
+      <p>{{ course.finished ? "当前已完成" : "当前学习中" }}</p>
+      <button type="button" @click="$emit('toggle', course.id)">
+        <slot name="action">操作</slot>
+      </button>
+    </article>
+  `,
+};
+
+new Vue({
+  el: "#app",
+  components: {
+    CourseItem,
+  },
+  data: {
+    keyword: "",
+    statusFilter: "all",
+    courses: [
+      { id: 1, title: "Vue 实例基础", finished: true, level: "基础" },
+      { id: 2, title: "模板语法与指令", finished: false, level: "基础" },
+      { id: 3, title: "组件通信实战", finished: false, level: "进阶" },
+      { id: 4, title: "生命周期和异步", finished: true, level: "进阶" },
+    ],
+  },
+  computed: {
+    filteredCourses() {
+      // 任务：
+      // 1. 先按 statusFilter 过滤
+      // 2. 再按 keyword 过滤标题
+      return this.courses;
+    },
+    totalCount() {
+      return this.courses.length;
+    },
+    finishedCount() {
+      // 任务：返回已完成课程数量
+      return 0;
+    },
+    visibleCount() {
+      // 任务：返回当前筛选后的数量
+      return 0;
+    },
+  },
+  watch: {
+    keyword(newValue) {
+      // 任务：在控制台输出关键字变化
+    },
+  },
+  methods: {
+    toggleCourse(courseId) {
+      // 任务：根据 courseId 切换 finished
+    },
+    focusSearch() {
+      // 任务：通过 ref 聚焦输入框
+    },
+  },
+});