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/07-lifecycle-and-async/answer.js

@@ -0,0 +1,36 @@
+new Vue({
+  el: "#app",
+  data: {
+    loading: true,
+    courses: [],
+  },
+  created() {
+    console.log("created: 实例已经创建");
+  },
+  mounted() {
+    console.log("mounted: 页面已经挂载");
+
+    setTimeout(() => {
+      this.courses = [
+        { id: 1, title: "生命周期基础" },
+        { id: 2, title: "异步数据渲染" },
+        { id: 3, title: "组件更新时机" },
+      ];
+      this.loading = false;
+    }, 1000);
+  },
+  updated() {
+    console.log("updated: 页面数据已经更新");
+  },
+  beforeDestroy() {
+    console.log("beforeDestroy: 实例即将销毁");
+  },
+  destroyed() {
+    console.log("destroyed: 实例已经销毁");
+  },
+  methods: {
+    destroyInstance() {
+      this.$destroy();
+    },
+  },
+});