vue2

Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example
l
2026-03-26 21:45:32 +08:00 · 2026-03-25 18:13:41 +08:00 · 2026-03-25 18:13:35 +08:00 · 2026-03-24 23:02:59 +08:00 · 2026-03-24 23:02:58 +08:00
51 changed files with 1785 additions and 89 deletions
--- a/07-vue2/01-vue-instance-and-data/starter.js
+++ b/07-vue2/01-vue-instance-and-data/starter.js
@@ -10,6 +10,9 @@ new Vue({
      // 任务：
      // 1. learnerCount 加 1
      // 2. 在控制台输出最新人数
      this.learnerCount++
      console.log(this.learnerCount);
    },
  },
 });
--- a/07-vue2/02-template-bindings/starter.html
+++ b/07-vue2/02-template-bindings/starter.html
@@ -1,17 +1,50 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>模板绑定</title>
  <style>
-      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f6f8fb; }
+    body {
-      .card { max-width: 680px; margin: 0 auto; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid #dde6f5; }
+      margin: 0;
-      img { width: 100%; border-radius: 16px; }
+      padding: 32px;
-      .link { display: inline-block; margin-top: 12px; color: #2d6cdf; }
+      font-family: "PingFang SC", sans-serif;
-      button { margin-top: 18px; padding: 10px 16px; border: 0; border-radius: 999px; background: #15233f; color: #fff; cursor: pointer; }
+      background: #f6f8fb;
    }
    .card {
      max-width: 680px;
      margin: 0 auto;
      padding: 24px;
      border-radius: 20px;
      background: #fff;
      border: 1px solid #dde6f5;
    }
    img {
      width: 100%;
      border-radius: 16px;
    }
    .link {
      display: inline-block;
      margin-top: 12px;
      color: #2d6cdf;
    }
    button {
      margin-top: 18px;
      padding: 10px 16px;
      border: 0;
      border-radius: 999px;
      background: #15233f;
      color: #fff;
      cursor: pointer;
    }
  </style>
 </head>
 <body>
  <section id="app" class="card">
    <h1>{{ courseTitle }}</h1>
@@ -25,4 +58,5 @@
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="./starter.js"></script>
 </body>
 </html>
--- a/07-vue2/02-template-bindings/starter.js
+++ b/07-vue2/02-template-bindings/starter.js
@@ -12,6 +12,9 @@ new Vue({
      // 任务：
      // 1. 切换 isCollected
      // 2. 在控制台输出最新收藏状态
      this.isCollected = !this.isCollected
      console.log(this.isCollected);
    },
  },
 });
--- a/07-vue2/05-computed-and-watch/starter.html
+++ b/07-vue2/05-computed-and-watch/starter.html
@@ -1,15 +1,36 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>computed 和 watch</title>
  <style>
-      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f7f9fd; }
+    body {
-      .panel { max-width: 760px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d9e2f0; }
+      margin: 0;
-      input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #ccd7e9; }
+      padding: 32px;
      font-family: "PingFang SC", sans-serif;
      background: #f7f9fd;
    }
    .panel {
      max-width: 760px;
      margin: 0 auto;
      padding: 24px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid #d9e2f0;
    }
    input {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid #ccd7e9;
    }
  </style>
 </head>
 <body>
  <section id="app" class="panel">
    <h1>课程搜索</h1>
@@ -25,4 +46,5 @@
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="./starter.js"></script>
 </body>
 </html>
--- a/07-vue2/05-computed-and-watch/starter.js
+++ b/07-vue2/05-computed-and-watch/starter.js
@@ -11,16 +11,19 @@ new Vue({
  computed: {
    filteredCourses() {
      // 任务：返回过滤后的课程列表
-      return this.courses;
+      const value = this.keyword.trim().toUpperCase()
      return this.courses.filter(item => item.title.toUpperCase().includes(value))
    },
    matchedCount() {
      // 任务：返回 filteredCourses 的数量
-      return 0;
+      return this.filteredCourses.length;
    },
  },
  watch: {
    keyword(newValue) {
      // 任务：在控制台输出关键字变化
      console.log(`筛选关键词：${newValue}`);
    },
  },
 });
--- a/07-vue2/06-class-style-and-event/starter.html
+++ b/07-vue2/06-class-style-and-event/starter.html
@@ -1,18 +1,52 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>动态类名、样式和事件</title>
  <style>
-      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f4f8fb; }
+    body {
-      .panel { max-width: 760px; margin: 0 auto; }
+      margin: 0;
-      .card { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d8e4f3; cursor: pointer; transition: all .2s ease; }
+      padding: 32px;
-      .card.active { border-color: #2d6cdf; background: #eef4ff; }
+      font-family: "PingFang SC", sans-serif;
-      .progress-track { height: 12px; margin-top: 16px; border-radius: 999px; background: #e6edf8; overflow: hidden; }
+      background: #f4f8fb;
-      .progress-bar { height: 100%; background: linear-gradient(90deg, #2d6cdf, #58a2ff); }
+    }
    .panel {
      max-width: 760px;
      margin: 0 auto;
    }
    .card {
      padding: 24px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid #d8e4f3;
      cursor: pointer;
      transition: all .2s ease;
    }
    .card.active {
      border-color: #2d6cdf;
      background: #eef4ff;
    }
    .progress-track {
      height: 12px;
      margin-top: 16px;
      border-radius: 999px;
      background: #e6edf8;
      overflow: hidden;
    }
    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #2d6cdf, #58a2ff);
    }
  </style>
 </head>
 <body>
  <section id="app" class="panel">
    <article class="card" :class="{ active: isActive }" @click="toggleCard">
@@ -28,4 +62,5 @@
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="./starter.js"></script>
 </body>
 </html>
--- a/07-vue2/06-class-style-and-event/starter.js
+++ b/07-vue2/06-class-style-and-event/starter.js
@@ -9,7 +9,13 @@ new Vue({
    toggleCard() {
      // 任务：
      // 1. 切换 isActive
      this.isActive = !this.isActive
      // 2. 如果激活了，让 progress 增加到 80
      if (this.isActive) {
        this.progress = 80
      } else {
        this.progress = 35
      }
      // 3. 如果取消激活，让 progress 回到 35
    },
  },
--- a/07-vue2/07-lifecycle-and-async/starter.js
+++ b/07-vue2/07-lifecycle-and-async/starter.js
@@ -12,19 +12,37 @@ new Vue({
    // 1. 模拟异步请求
    // 2. 1 秒后给 courses 赋值
    // 3. loading 改成 false
    console.log("1");
    const thiz = this
    setTimeout(function () {
      thiz.courses = [
        { id: 1, title: 'HTML' },
        { id: 2, title: 'CSS' },
        { id: 3, title: 'JS' }
      ]
      thiz.loading = false
    }, 1000)
  },
  updated() {
    // 任务：在控制台输出 updated 日志
    console.log("更新");
  },
  beforeDestroy() {
    // 任务：在控制台输出 beforeDestroy 日志
    console.log("已销毁");
  },
  destroyed() {
    // 任务：在控制台输出 destroyed 日志
    console.log("销毁完成");
  },
  methods: {
    destroyInstance() {
      // 任务：调用 this.$destroy()
      this.$destroy()
    },
  },
 });
--- a/07-vue2/08-components-communication-and-final/starter.js
+++ b/07-vue2/08-components-communication-and-final/starter.js
@@ -52,15 +52,23 @@ new Vue({
  computed: {
    filteredCourses() {
      // 任务：根据 keyword 过滤课程列表
-      return this.courses;
+      let value = this.keyword.trim().toUpperCase()
      return this.courses.filter(item => item.title.toUpperCase().includes(value))
    },
  },
  methods: {
    toggleCourse(courseId) {
      // 任务：根据 courseId 切换 finished
      const a = this.courses.find(item => {
        if (item.id === courseId) {
          item.finished = !item.finished
        }
        return;
      })
    },
    focusInput() {
      // 任务：通过 ref 聚焦输入框
      this.$refs.keywordInput.focus()
    },
  },
 });
--- a/07-vue2/09-final-course-dashboard/starter.js
+++ b/07-vue2/09-final-course-dashboard/starter.js
@@ -49,31 +49,49 @@ new Vue({
      // 任务：
      // 1. 先按 statusFilter 过滤
      // 2. 再按 keyword 过滤标题
-      return this.courses;
+      let value = this.keyword.trim().toUpperCase()
      let a
      if (this.statusFilter === "all") {
        a = this.courses.filter(item => item.title.toUpperCase().includes(value))
      } else if (this.statusFilter === "done") {
        const b = this.courses.filter(item => item.finished === true)
        a = b.filter(item => item.title.toUpperCase().includes(value))
      } else if (this.statusFilter === "doing") {
        const b = this.courses.filter(item => item.finished === false)
        a = b.filter(item => item.title.toUpperCase().includes(value))
      }
      return a
    },
    totalCount() {
      return this.courses.length;
    },
    finishedCount() {
      // 任务：返回已完成课程数量
-      return 0;
+      const b = this.courses.filter(item => item.finished === true)
      return b.length
    },
    visibleCount() {
      // 任务：返回当前筛选后的数量
-      return 0;
+      const a = this.filteredCourses
      return a.length;
    },
  },
  watch: {
    keyword(newValue) {
      // 任务：在控制台输出关键字变化
      console.log(`关键词：${newValue}`);
    },
  },
  methods: {
    toggleCourse(courseId) {
      // 任务：根据 courseId 切换 finished
      const a = this.courses.find(item => item.id === courseId)
      a.finished = !a.finished
    },
    focusSearch() {
      // 任务：通过 ref 聚焦输入框
      this.$refs.searchInput.focus()
    },
  },
 });
--- a/08-vue3/01-create-app-and-ref/README.md
+++ b/08-vue3/01-create-app-and-ref/README.md
@@ -0,0 +1,23 @@
 # 练习 1：createApp、setup 和 ref
 ## 目标
 学会用 Vue3 的 `createApp` 和 `setup()` 启动页面，并用 `ref` 创建最基础的响应式数据。
 ## 你要练什么
 - `createApp`
 - `setup()`
 - `ref`
 - 模板插值
 ## 任务
 - 显示页面标题和学习人数
 - 点击按钮后让人数加 1
 - 在控制台输出最新人数
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/01-create-app-and-ref/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/01-create-app-and-ref/starter.js)
--- a/08-vue3/01-create-app-and-ref/starter.html
+++ b/08-vue3/01-create-app-and-ref/starter.html
@@ -0,0 +1,23 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>createApp、setup 和 ref</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f5f7fb; }
      .panel { max-width: 720px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #dce5f2; }
      button { padding: 10px 16px; border: 0; border-radius: 999px; background: #2d6cdf; color: #fff; cursor: pointer; }
    </style>
  </head>
  <body>
    <section id="app" class="panel">
      <h1>{{ title }}</h1>
      <p>当前学习人数：{{ learnerCount }}</p>
      <button type="button" @click="increaseLearner">加入学习</button>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/01-create-app-and-ref/starter.js
+++ b/08-vue3/01-create-app-and-ref/starter.js
@@ -0,0 +1,20 @@
 const { createApp, ref } = Vue;
 createApp({
  setup() {
    const title = ref("Vue3 基础入门");
    const learnerCount = ref(16);
    function increaseLearner() {
      // 任务：
      // 1. learnerCount 加 1
      // 2. 在控制台输出最新人数
    }
    return {
      title,
      learnerCount,
      increaseLearner,
    };
  },
 }).mount("#app");
--- a/08-vue3/02-reactive-and-computed/README.md
+++ b/08-vue3/02-reactive-and-computed/README.md
@@ -0,0 +1,23 @@
 # 练习 2：reactive 和 computed
 ## 目标
 学会把一组相关数据放进 `reactive`，并用 `computed` 推导派生结果。
 ## 你要练什么
 - `reactive`
 - `computed`
 - 响应式对象
 - 派生状态
 ## 任务
 - 用 `reactive` 管理课程信息
 - 用 `computed` 计算进度文案
 - 点击按钮后让完成课时增加
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/02-reactive-and-computed/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/02-reactive-and-computed/starter.js)
--- a/08-vue3/02-reactive-and-computed/starter.html
+++ b/08-vue3/02-reactive-and-computed/starter.html
@@ -0,0 +1,25 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>reactive 和 computed</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f6f8fc; }
      .panel { max-width: 720px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #dbe4f1; }
      button { padding: 10px 16px; border: 0; border-radius: 999px; background: #1c2f52; color: #fff; cursor: pointer; }
    </style>
  </head>
  <body>
    <section id="app" class="panel">
      <h1>{{ course.title }}</h1>
      <p>总课时：{{ course.totalLessons }}</p>
      <p>已完成：{{ course.finishedLessons }}</p>
      <p>{{ progressText }}</p>
      <button type="button" @click="finishOneLesson">完成一节</button>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/02-reactive-and-computed/starter.js
+++ b/08-vue3/02-reactive-and-computed/starter.js
@@ -0,0 +1,26 @@
 const { createApp, reactive, computed } = Vue;
 createApp({
  setup() {
    const course = reactive({
      title: "Vue3 响应式基础",
      totalLessons: 10,
      finishedLessons: 3,
    });
    const progressText = computed(() => {
      // 任务：返回类似 “当前已完成 3 / 10 节”
      return "";
    });
    function finishOneLesson() {
      // 任务：在不超过总课时的前提下，finishedLessons 加 1
    }
    return {
      course,
      progressText,
      finishOneLesson,
    };
  },
 }).mount("#app");
--- a/08-vue3/03-watch-and-watch-effect/README.md
+++ b/08-vue3/03-watch-and-watch-effect/README.md
@@ -0,0 +1,23 @@
 # 练习 3：watch 和 watchEffect
 ## 目标
 学会区分“监听指定数据变化”和“自动收集依赖并执行副作用”。
 ## 你要练什么
 - `watch`
 - `watchEffect`
 - 搜索关键字监听
 - 副作用日志
 ## 任务
 - 输入关键字时，用 `watch` 输出变化日志
 - 用 `watchEffect` 输出当前筛选信息
 - 根据关键字过滤课程列表
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/03-watch-and-watch-effect/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/03-watch-and-watch-effect/starter.js)
--- a/08-vue3/03-watch-and-watch-effect/starter.html
+++ b/08-vue3/03-watch-and-watch-effect/starter.html
@@ -0,0 +1,25 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>watch 和 watchEffect</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f7f9fd; }
      .panel { max-width: 760px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d9e2f0; }
      input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #ccd7e9; }
    </style>
  </head>
  <body>
    <section id="app" class="panel">
      <h1>课程搜索</h1>
      <input v-model="keyword" type="text" placeholder="输入关键字" />
      <ul>
        <li v-for="item in filteredCourses" :key="item.id">{{ item.title }}</li>
      </ul>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/03-watch-and-watch-effect/starter.js
+++ b/08-vue3/03-watch-and-watch-effect/starter.js
@@ -0,0 +1,30 @@
 const { createApp, ref, computed, watch, watchEffect } = Vue;
 createApp({
  setup() {
    const keyword = ref("");
    const courses = ref([
      { id: 1, title: "ref 和 reactive" },
      { id: 2, title: "watch 和 watchEffect" },
      { id: 3, title: "组件通信" },
    ]);
    const filteredCourses = computed(() => {
      // 任务：根据 keyword 过滤课程
      return courses.value;
    });
    watch(keyword, (newValue, oldValue) => {
      // 任务：输出关键字变化日志
    });
    watchEffect(() => {
      // 任务：输出当前筛选后的数量
    });
    return {
      keyword,
      filteredCourses,
    };
  },
 }).mount("#app");
--- a/08-vue3/04-lifecycle-and-template-ref/README.md
+++ b/08-vue3/04-lifecycle-and-template-ref/README.md
@@ -0,0 +1,23 @@
 # 练习 4：生命周期和模板 ref
 ## 目标
 学会在组合式 API 里使用生命周期钩子，并通过模板 `ref` 获取 DOM。
 ## 你要练什么
 - `onMounted`
 - `onUpdated`
 - `onUnmounted`
 - 模板 `ref`
 ## 任务
 - 页面挂载后自动聚焦输入框
 - 数据更新后输出日志
 - 页面卸载前清理定时器
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/04-lifecycle-and-template-ref/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/04-lifecycle-and-template-ref/starter.js)
--- a/08-vue3/04-lifecycle-and-template-ref/starter.html
+++ b/08-vue3/04-lifecycle-and-template-ref/starter.html
@@ -0,0 +1,23 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>生命周期和模板 ref</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f4f8fb; }
      .panel { max-width: 720px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d8e4f3; }
      input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #cad7ea; }
    </style>
  </head>
  <body>
    <section id="app" class="panel">
      <h1>生命周期练习</h1>
      <input ref="keywordInput" v-model="keyword" type="text" placeholder="页面挂载后请自动聚焦" />
      <p>当前输入：{{ keyword }}</p>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/04-lifecycle-and-template-ref/starter.js
+++ b/08-vue3/04-lifecycle-and-template-ref/starter.js
@@ -0,0 +1,28 @@
 const { createApp, ref, onMounted, onUpdated, onUnmounted } = Vue;
 createApp({
  setup() {
    const keyword = ref("");
    const keywordInput = ref(null);
    let timer = null;
    onMounted(() => {
      // 任务：
      // 1. 让输入框自动聚焦
      // 2. 建立一个定时器
    });
    onUpdated(() => {
      // 任务：输出 updated 日志
    });
    onUnmounted(() => {
      // 任务：清理定时器并输出销毁日志
    });
    return {
      keyword,
      keywordInput,
    };
  },
 }).mount("#app");
--- a/08-vue3/05-props-and-emits/README.md
+++ b/08-vue3/05-props-and-emits/README.md
@@ -0,0 +1,22 @@
 # 练习 5：props 和 emit
 ## 目标
 学会在 Vue3 里写基础组件通信。
 ## 你要练什么
 - `props`
 - `emit`
 - 组件拆分
 ## 任务
 - 把课程项拆成子组件
 - 父组件传入课程对象
 - 子组件点击按钮后通知父组件切换完成状态
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/05-props-and-emits/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/05-props-and-emits/starter.js)
--- a/08-vue3/05-props-and-emits/starter.html
+++ b/08-vue3/05-props-and-emits/starter.html
@@ -0,0 +1,28 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>props 和 emit</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f4f7fb; }
      .wrap { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
      .card { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #d9e3f2; }
      .done { color: #1f8f54; }
      button { padding: 10px 14px; border: 0; border-radius: 999px; background: #2d6cdf; color: #fff; cursor: pointer; }
    </style>
  </head>
  <body>
    <section id="app" class="wrap">
      <course-item
        v-for="course in courses"
        :key="course.id"
        :course="course"
        @toggle="toggleCourse"
      ></course-item>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/05-props-and-emits/starter.js
+++ b/08-vue3/05-props-and-emits/starter.js
@@ -0,0 +1,39 @@
 const { createApp } = Vue;
 createApp({
  components: {
    CourseItem: {
      props: {
        course: {
          type: Object,
          required: true,
        },
      },
      emits: ["toggle"],
      template: `
        <article class="card">
          <h2>{{ course.title }}</h2>
          <p :class="{ done: course.finished }">
            {{ course.finished ? "已完成" : "学习中" }}
          </p>
          <button type="button" @click="$emit('toggle', course.id)">切换状态</button>
        </article>
      `,
    },
  },
  setup() {
    const courses = Vue.ref([
      { id: 1, title: "组合式 API", finished: true },
      { id: 2, title: "组件通信", finished: false },
    ]);
    function toggleCourse(courseId) {
      // 任务：根据 courseId 切换对应课程的 finished
    }
    return {
      courses,
      toggleCourse,
    };
  },
 }).mount("#app");
--- a/08-vue3/06-slots-and-provide-inject/README.md
+++ b/08-vue3/06-slots-and-provide-inject/README.md
@@ -0,0 +1,22 @@
 # 练习 6：slot 与 provide / inject
 ## 目标
 学会更灵活地组织组件树中的内容和共享信息。
 ## 你要练什么
 - `slot`
 - `provide`
 - `inject`
 ## 任务
 - 用插槽自定义卡片按钮文案
 - 父组件通过 `provide` 提供主题色
 - 子组件通过 `inject` 使用主题信息
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/06-slots-and-provide-inject/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/06-slots-and-provide-inject/starter.js)
--- a/08-vue3/06-slots-and-provide-inject/starter.html
+++ b/08-vue3/06-slots-and-provide-inject/starter.html
@@ -0,0 +1,26 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>slot 与 provide/inject</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f6f8fc; }
      .wrap { max-width: 820px; margin: 0 auto; }
      .card { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid #dce5f2; }
      button { padding: 10px 14px; border: 0; border-radius: 999px; color: #fff; cursor: pointer; }
    </style>
  </head>
  <body>
    <section id="app" class="wrap">
      <theme-card>
        <template #default>
          继续学习
        </template>
      </theme-card>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/06-slots-and-provide-inject/starter.js
+++ b/08-vue3/06-slots-and-provide-inject/starter.js
@@ -0,0 +1,27 @@
 const { createApp, provide, inject } = Vue;
 createApp({
  components: {
    ThemeCard: {
      setup() {
        const themeColor = inject("themeColor");
        return {
          themeColor,
        };
      },
      template: `
        <article class="card">
          <h2>主题卡片</h2>
          <button type="button" :style="{ background: themeColor }">
            <slot>默认按钮</slot>
          </button>
        </article>
      `,
    },
  },
  setup() {
    // 任务：通过 provide 提供 themeColor
    return {};
  },
 }).mount("#app");
--- a/08-vue3/07-composable-and-async/README.md
+++ b/08-vue3/07-composable-and-async/README.md
@@ -0,0 +1,26 @@
 # 练习 7：composable 和异步状态
 ## 目标
 学会把可复用逻辑抽成 composable，并管理 loading / error / data。
 ## 你要练什么
 - composable
 - `ref`
 - 异步状态
 - `loading`
 - `error`
 ## 任务
 - 把课程请求逻辑抽成 `useCourses`
 - 页面加载时调用它
 - 显示 loading
 - 请求成功后渲染列表
 - 请求失败时显示错误信息
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/07-composable-and-async/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/07-composable-and-async/starter.js)
--- a/08-vue3/07-composable-and-async/starter.html
+++ b/08-vue3/07-composable-and-async/starter.html
@@ -0,0 +1,26 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>composable 和异步状态</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f5f8fc; }
      .panel { max-width: 760px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #dbe4f2; }
      .error { color: #b42318; }
    </style>
  </head>
  <body>
    <section id="app" class="panel">
      <h1>课程请求练习</h1>
      <p v-if="loading">数据加载中...</p>
      <p v-if="error" class="error">{{ error }}</p>
      <ul v-if="!loading && !error">
        <li v-for="item in courses" :key="item.id">{{ item.title }}</li>
      </ul>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/07-composable-and-async/starter.js
+++ b/08-vue3/07-composable-and-async/starter.js
@@ -0,0 +1,38 @@
 const { createApp, ref, onMounted } = Vue;
 function useCourses() {
  const courses = ref([]);
  const loading = ref(true);
  const error = ref("");
  async function loadCourses() {
    // 任务：
    // 1. 模拟异步请求
    // 2. 成功时给 courses 赋值
    // 3. 失败时给 error 赋值
    // 4. 最后把 loading 设为 false
  }
  return {
    courses,
    loading,
    error,
    loadCourses,
  };
 }
 createApp({
  setup() {
    const { courses, loading, error, loadCourses } = useCourses();
    onMounted(() => {
      // 任务：页面挂载后调用 loadCourses
    });
    return {
      courses,
      loading,
      error,
    };
  },
 }).mount("#app");
--- a/08-vue3/08-final-dashboard/README.md
+++ b/08-vue3/08-final-dashboard/README.md
@@ -0,0 +1,30 @@
 # 练习 8：Vue3 综合小面板
 ## 目标
 把 Vue3 组合式 API 的主线能力串起来，完成一个小型课程面板。
 ## 你要练什么
 - `ref`
 - `reactive`
 - `computed`
 - `watch`
 - 组件通信
 - composable
 - 模板 `ref`
 ## 任务
 - 做一个课程搜索和筛选面板
 - 用 `computed` 计算筛选结果和统计数据
 - 用 `watch` 输出搜索关键字变化
 - 用子组件渲染课程卡片
 - 点击按钮切换课程完成状态
 - 点击按钮聚焦搜索框
 - 抽一个 composable 管理课程数据
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/08-final-dashboard/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/08-final-dashboard/starter.js)
--- a/08-vue3/08-final-dashboard/starter.html
+++ b/08-vue3/08-final-dashboard/starter.html
@@ -0,0 +1,56 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3 综合小面板</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f4f7fb; }
      .page { max-width: 960px; margin: 0 auto; display: grid; gap: 18px; }
      .panel { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #d9e4f1; }
      .toolbar { display: grid; grid-template-columns: 1fr 180px 160px; gap: 12px; }
      input, select, button { padding: 12px 14px; border-radius: 12px; border: 1px solid #cad6e8; font: inherit; }
      button { border: 0; background: #2d6cdf; color: #fff; cursor: pointer; }
      .list { display: grid; gap: 14px; }
      .course-card { padding: 18px; border-radius: 16px; border: 1px solid #dbe4f1; background: #fbfcfe; }
      .course-card.is-done { border-color: #6cc18a; background: #f3fbf6; }
    </style>
  </head>
  <body>
    <section id="app" class="page">
      <article class="panel">
        <h1>Vue3 综合课程面板</h1>
        <div class="toolbar">
          <input ref="searchInput" v-model="keyword" type="text" placeholder="输入课程关键字" />
          <select v-model="statusFilter">
            <option value="all">全部</option>
            <option value="done">已完成</option>
            <option value="doing">学习中</option>
          </select>
          <button type="button" @click="focusSearch">聚焦搜索框</button>
        </div>
      </article>
      <section class="panel">
        <div v-if="!filteredCourses.length">暂无匹配结果</div>
        <div v-show="filteredCourses.length" class="list">
          <course-item
            v-for="course in filteredCourses"
            :key="course.id"
            :course="course"
            @toggle="toggleCourse"
          ></course-item>
        </div>
      </section>
      <footer class="panel">
        <p>总课程数：{{ totalCount }}</p>
        <p>已完成数：{{ finishedCount }}</p>
        <p>当前筛选数：{{ visibleCount }}</p>
      </footer>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/08-final-dashboard/starter.js
+++ b/08-vue3/08-final-dashboard/starter.js
@@ -0,0 +1,85 @@
 const { createApp, ref, computed, watch } = Vue;
 function useCourses() {
  const courses = ref([
    { id: 1, title: "setup 和 ref", finished: true },
    { id: 2, title: "reactive 和 computed", finished: false },
    { id: 3, title: "组件通信", finished: false },
    { id: 4, title: "composable 实战", finished: true },
  ]);
  function toggleCourse(courseId) {
    // 任务：根据 courseId 切换课程完成状态
  }
  return {
    courses,
    toggleCourse,
  };
 }
 createApp({
  components: {
    CourseItem: {
      props: {
        course: {
          type: Object,
          required: true,
        },
      },
      emits: ["toggle"],
      template: `
        <article class="course-card" :class="{ 'is-done': course.finished }">
          <h2>{{ course.title }}</h2>
          <p>{{ course.finished ? "已完成" : "学习中" }}</p>
          <button type="button" @click="$emit('toggle', course.id)">切换状态</button>
        </article>
      `,
    },
  },
  setup() {
    const keyword = ref("");
    const statusFilter = ref("all");
    const searchInput = ref(null);
    const { courses, toggleCourse } = useCourses();
    const filteredCourses = computed(() => {
      // 任务：同时按关键字和状态筛选课程
      return courses.value;
    });
    const totalCount = computed(() => {
      return courses.value.length;
    });
    const finishedCount = computed(() => {
      // 任务：返回已完成数量
      return 0;
    });
    const visibleCount = computed(() => {
      // 任务：返回当前筛选后的数量
      return 0;
    });
    watch(keyword, (newValue) => {
      // 任务：输出关键字变化
    });
    function focusSearch() {
      // 任务：通过模板 ref 聚焦输入框
    }
    return {
      keyword,
      statusFilter,
      searchInput,
      filteredCourses,
      totalCount,
      finishedCount,
      visibleCount,
      toggleCourse,
      focusSearch,
    };
  },
 }).mount("#app");
--- a/08-vue3/09-reactivity-helpers/README.md
+++ b/08-vue3/09-reactivity-helpers/README.md
@@ -0,0 +1,24 @@
 # 练习 9：toRef、toRefs 和 readonly
 ## 目标
 学会把响应式对象里的字段拆出来继续保持响应式，并理解只读数据的使用场景。
 ## 你要练什么
 - `toRef`
 - `toRefs`
 - `readonly`
 ## 任务
 - 用 `reactive` 管理学习者信息
 - 用 `toRef` 单独取出 `name`
 - 用 `toRefs` 拆出其余字段
 - 用 `readonly` 包一层设置项
 - 点击按钮更新学习者信息并观察页面变化
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/09-reactivity-helpers/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/09-reactivity-helpers/starter.js)
--- a/08-vue3/09-reactivity-helpers/starter.html
+++ b/08-vue3/09-reactivity-helpers/starter.html
@@ -0,0 +1,26 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>toRef、toRefs 和 readonly</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f5f8fc; }
      .panel { max-width: 760px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #dbe4f2; }
      button { padding: 10px 16px; border: 0; border-radius: 999px; background: #2d6cdf; color: #fff; cursor: pointer; }
      code { background: #f2f6fb; padding: 2px 6px; border-radius: 8px; }
    </style>
  </head>
  <body>
    <section id="app" class="panel">
      <h1>{{ name }}</h1>
      <p>当前阶段：{{ stage }}</p>
      <p>学习天数：{{ studyDays }}</p>
      <p>主题模式：<code>{{ settings.theme }}</code></p>
      <button type="button" @click="updateProfile">更新资料</button>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/09-reactivity-helpers/starter.js
+++ b/08-vue3/09-reactivity-helpers/starter.js
@@ -0,0 +1,33 @@
 const { createApp, reactive, toRef, toRefs, readonly } = Vue;
 createApp({
  setup() {
    const profile = reactive({
      name: "林晨",
      stage: "Vue3 入门",
      studyDays: 12,
    });
    const name = toRef(profile, "name");
    const { stage, studyDays } = toRefs(profile);
    const settings = readonly({
      theme: "light",
    });
    function updateProfile() {
      // 任务：
      // 1. 更新 name.value
      // 2. 更新 stage.value
      // 3. 让 studyDays.value + 1
      // 4. 不要直接修改 settings.theme
    }
    return {
      name,
      stage,
      studyDays,
      settings,
      updateProfile,
    };
  },
 }).mount("#app");
--- a/08-vue3/10-next-tick-and-component-v-model/README.md
+++ b/08-vue3/10-next-tick-and-component-v-model/README.md
@@ -0,0 +1,24 @@
 # 练习 10：nextTick 和组件 v-model
 ## 目标
 学会在 DOM 更新完成后执行逻辑，并理解 Vue3 组件 `v-model` 的通信约定。
 ## 你要练什么
 - `nextTick`
 - 组件 `v-model`
 - `modelValue`
 - `update:modelValue`
 ## 任务
 - 封装一个搜索输入子组件
 - 父组件通过 `v-model` 绑定关键字
 - 点击“展开搜索区”后，等 DOM 更新完成再聚焦输入框
 - 在控制台输出关键字变化
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/10-next-tick-and-component-v-model/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/10-next-tick-and-component-v-model/starter.js)
--- a/08-vue3/10-next-tick-and-component-v-model/starter.html
+++ b/08-vue3/10-next-tick-and-component-v-model/starter.html
@@ -0,0 +1,29 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>nextTick 和组件 v-model</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f4f7fb; }
      .panel { max-width: 760px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d9e4f1; }
      input, button { padding: 12px 14px; border-radius: 12px; font: inherit; }
      input { width: 100%; border: 1px solid #cad6e8; }
      button { border: 0; background: #2d6cdf; color: #fff; cursor: pointer; margin-bottom: 16px; }
    </style>
  </head>
  <body>
    <section id="app" class="panel">
      <button type="button" @click="toggleSearch">展开搜索区</button>
      <div v-if="showSearch">
        <search-input ref="searchBox" v-model="keyword"></search-input>
      </div>
      <p>当前关键字：{{ keyword }}</p>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/10-next-tick-and-component-v-model/starter.js
+++ b/08-vue3/10-next-tick-and-component-v-model/starter.js
@@ -0,0 +1,52 @@
 const { createApp, ref, nextTick, watch } = Vue;
 createApp({
  components: {
    SearchInput: {
      props: {
        modelValue: {
          type: String,
          default: "",
        },
      },
      emits: ["update:modelValue"],
      template: `
        <input
          ref="inputEl"
          :value="modelValue"
          type="text"
          placeholder="请输入课程关键字"
          @input="$emit('update:modelValue', $event.target.value)"
        />
      `,
      methods: {
        focus() {
          this.$refs.inputEl.focus();
        },
      },
    },
  },
  setup() {
    const showSearch = ref(false);
    const keyword = ref("");
    const searchBox = ref(null);
    watch(keyword, (newValue) => {
      // 任务：在控制台输出关键字变化
    });
    async function toggleSearch() {
      // 任务：
      // 1. 切换 showSearch.value
      // 2. 如果展开了，await nextTick()
      // 3. 通过 searchBox.value.focus() 聚焦输入框
    }
    return {
      showSearch,
      keyword,
      searchBox,
      toggleSearch,
    };
  },
 }).mount("#app");
--- a/08-vue3/11-before-hooks-and-expose/README.md
+++ b/08-vue3/11-before-hooks-and-expose/README.md
@@ -0,0 +1,24 @@
 # 练习 11：before 系列生命周期和 expose
 ## 目标
 学会在组合式 API 中使用 before 系列生命周期，并理解子组件如何有选择地暴露能力给父组件。
 ## 你要练什么
 - `onBeforeMount`
 - `onBeforeUpdate`
 - `onBeforeUnmount`
 - `expose`
 ## 任务
 - 在不同生命周期里输出日志
 - 父组件通过模板 `ref` 获取子组件实例
 - 子组件通过 `expose` 暴露一个 `focusInput` 方法
 - 父组件点击按钮后调用这个暴露出来的方法
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/11-before-hooks-and-expose/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/11-before-hooks-and-expose/starter.js)
--- a/08-vue3/11-before-hooks-and-expose/starter.html
+++ b/08-vue3/11-before-hooks-and-expose/starter.html
@@ -0,0 +1,25 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>before 系列生命周期和 expose</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f6f8fc; }
      .panel { max-width: 760px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #dde5f2; }
      button, input { padding: 12px 14px; border-radius: 12px; font: inherit; }
      input { width: 100%; border: 1px solid #ccd7e9; margin-top: 12px; }
      button { border: 0; background: #2d6cdf; color: #fff; cursor: pointer; margin-right: 10px; }
    </style>
  </head>
  <body>
    <section id="app" class="panel">
      <button type="button" @click="focusChildInput">聚焦子组件输入框</button>
      <button type="button" @click="showChild = !showChild">切换子组件显示</button>
      <child-panel v-if="showChild" ref="childPanel"></child-panel>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/11-before-hooks-and-expose/starter.js
+++ b/08-vue3/11-before-hooks-and-expose/starter.js
@@ -0,0 +1,59 @@
 const {
  createApp,
  ref,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount,
 } = Vue;
 createApp({
  components: {
    ChildPanel: {
      template: `
        <div>
          <p>我是子组件</p>
          <input ref="inputEl" type="text" placeholder="等待父组件调用 focus" />
        </div>
      `,
      setup(props, { expose }) {
        const inputEl = ref(null);
        onBeforeMount(() => {
          // 任务：输出 beforeMount 日志
        });
        onBeforeUpdate(() => {
          // 任务：输出 beforeUpdate 日志
        });
        onBeforeUnmount(() => {
          // 任务：输出 beforeUnmount 日志
        });
        function focusInput() {
          // 任务：聚焦 inputEl
        }
        // 任务：通过 expose 暴露 focusInput
        return {
          inputEl,
        };
      },
    },
  },
  setup() {
    const showChild = ref(true);
    const childPanel = ref(null);
    function focusChildInput() {
      // 任务：调用 childPanel.value 暴露出来的方法
    }
    return {
      showChild,
      childPanel,
      focusChildInput,
    };
  },
 }).mount("#app");
--- a/08-vue3/12-built-in-components/README.md
+++ b/08-vue3/12-built-in-components/README.md
@@ -0,0 +1,22 @@
 # 练习 12：Teleport、Suspense 和 Transition
 ## 目标
 认识 Vue3 常见内置组件在实际页面里的使用方式。
 ## 你要练什么
 - `Teleport`
 - `Suspense`
 - `Transition`
 ## 任务
 - 用 `Teleport` 把弹层渲染到 `body`
 - 用 `Transition` 给弹层或提示做显隐动画
 - 用 `Suspense` 包裹一个异步组件，并显示 fallback
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/12-built-in-components/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/12-built-in-components/starter.js)
--- a/08-vue3/12-built-in-components/starter.html
+++ b/08-vue3/12-built-in-components/starter.html
@@ -0,0 +1,47 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Teleport、Suspense 和 Transition</title>
    <style>
      body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f4f7fb; }
      .panel { max-width: 760px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d9e4f1; }
      .modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(12, 17, 29, 0.45); }
      .modal-card { width: min(420px, calc(100vw - 32px)); padding: 24px; border-radius: 18px; background: #fff; }
      .fade-enter-active, .fade-leave-active { transition: opacity .24s ease; }
      .fade-enter-from, .fade-leave-to { opacity: 0; }
      button { padding: 10px 14px; border-radius: 12px; border: 0; background: #2d6cdf; color: #fff; cursor: pointer; }
    </style>
  </head>
  <body>
    <section id="app" class="panel">
      <h1>内置组件练习</h1>
      <button type="button" @click="showModal = !showModal">切换弹层</button>
      <Suspense>
        <template #default>
          <async-info></async-info>
        </template>
        <template #fallback>
          <p>异步组件加载中...</p>
        </template>
      </Suspense>
      <Teleport to="body">
        <Transition name="fade">
          <div v-if="showModal" class="modal">
            <div class="modal-card">
              <h2>练习弹层</h2>
              <p>这里应该通过 Teleport 渲染到 body。</p>
              <button type="button" @click="showModal = false">关闭</button>
            </div>
          </div>
        </Transition>
      </Teleport>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/08-vue3/12-built-in-components/starter.js
+++ b/08-vue3/12-built-in-components/starter.js
@@ -0,0 +1,24 @@
 const { createApp, ref } = Vue;
 createApp({
  components: {
    AsyncInfo: {
      async setup() {
        // 任务：
        // 1. 模拟等待
        // 2. 返回需要在模板中展示的数据
        return {};
      },
      template: `
        <p>这里会展示异步组件内容。</p>
      `,
    },
  },
  setup() {
    const showModal = ref(false);
    return {
      showModal,
    };
  },
 }).mount("#app");
--- a/08-vue3/13-script-setup-macros/README.md
+++ b/08-vue3/13-script-setup-macros/README.md
@@ -0,0 +1,26 @@
 # 练习 13：script setup、defineProps、defineEmits、defineExpose
 ## 目标
 补上 Vue3 在工程化单文件组件里的核心宏语法。
 ## 你要练什么
 - `<script setup>`
 - `defineProps`
 - `defineEmits`
 - `defineExpose`
 ## 说明
 这一题不是浏览器 CDN 练习，而是单文件组件语法练习，需要放在 `Vite + Vue3` 之类的工程里使用。
 ## 任务
 - 给子组件定义 `title` 和 `finished` 两个 props
 - 定义 `toggle` 事件并在按钮点击时触发
 - 暴露一个 `focusAction` 方法给父组件调用
 ## 文件
 - [starter.vue](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/13-script-setup-macros/starter.vue)
--- a/08-vue3/13-script-setup-macros/starter.vue
+++ b/08-vue3/13-script-setup-macros/starter.vue
@@ -0,0 +1,38 @@
 <template>
  <article class="course-card">
    <h2>{{ title }}</h2>
    <p>{{ finished ? "已完成" : "学习中" }}</p>
    <button ref="actionButton" type="button" @click="handleToggle">
      切换状态
    </button>
  </article>
 </template>
 <script setup>
 import { ref } from "vue";
 // 任务：
 // 1. 用 defineProps 定义 title 和 finished
 // 2. 用 defineEmits 定义 toggle
 // 3. 点击按钮时触发 toggle
 // 4. 用 defineExpose 暴露 focusAction
 const actionButton = ref(null);
 function handleToggle() {
  // 在这里触发 emit
 }
 function focusAction() {
  actionButton.value?.focus();
 }
 </script>
 <style scoped>
 .course-card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid #dbe4f1;
  background: #fbfcfe;
 }
 </style>
--- a/08-vue3/README.md
+++ b/08-vue3/README.md
@@ -0,0 +1,141 @@
 # Vue3（组合式 API + 响应式原理）
 你的学习文档里这一章的定位是 `Vue3（组合式API + 响应式原理）`。这一章我按这个方向来拆，不再重复 Vue2 的 Options API 主线，而是重点转到 Vue3 的组合式写法和响应式思维。
 ## 学完后你应该掌握
 - Vue3 和 Vue2 的核心差异
 - `createApp`
 - `setup()`
 - `ref`
 - `reactive`
 - `toRef`
 - `toRefs`
 - `readonly`
 - `computed`
 - `watch`
 - `watchEffect`
 - `nextTick`
 - 组合式 API 生命周期
 - 模板 `ref`
 - `props` 和 `emit`
 - 组件 `v-model`
 - `slot`
 - `provide` / `inject`
 - `expose`
 - composable 的基本抽离方式
 - `script setup`
 - `defineProps`
 - `defineEmits`
 - `defineExpose`
 - `Teleport`
 - `Suspense`
 - `Transition`
 - 如何用 Vue3 写一个小型管理面板
 ## 这一章在解决什么
 Vue2 更强调“选项式组织”。
 Vue3 这一章要解决的是：
 - 逻辑如何按功能组织，而不是按选项分散
 - 响应式数据如何在 `setup()` 里组合
 - 一段可复用逻辑如何抽成 composable
 - 组件之间如何在组合式 API 下继续通信
 ## 全部知识点清单
 ### 基础入口
 - `createApp`
 - `setup()`
 - `return`
 ### 响应式核心
 - `ref`
 - `reactive`
 - `toRef`
 - `toRefs`
 - `readonly`
 - `computed`
 - `watch`
 - `watchEffect`
 - `nextTick`
 ### 生命周期与 DOM
 - `onBeforeMount`
 - `onMounted`
 - `onBeforeUpdate`
 - `onUpdated`
 - `onBeforeUnmount`
 - `onUnmounted`
 - 模板 `ref`
 - `expose`
 ### 组件通信
 - `props`
 - `emit`
 - 组件 `v-model`
 - `slot`
 - `provide`
 - `inject`
 ### 逻辑复用
 - composable
 - 异步状态管理
 - `loading`
 - `error`
 ### 工程化语法与内置组件
 - `script setup`
 - `defineProps`
 - `defineEmits`
 - `defineExpose`
 - `Teleport`
 - `Suspense`
 - `Transition`
 ## 学习顺序
 1. `createApp`、`setup()` 和 `ref`
 2. `reactive` 和 `computed`
 3. `watch` 和 `watchEffect`
 4. 生命周期和模板 `ref`
 5. `props` 和 `emit`
 6. `slot` 与 `provide` / `inject`
 7. composable 与异步状态
 8. `toRefs`、`readonly` 等响应式辅助工具
 9. `nextTick` 和组件 `v-model`
 10. before 系列生命周期与 `expose`
 11. `Teleport`、`Suspense`、`Transition`
 12. `script setup` 宏
 13. 综合小页面
 ## 练习目录
 - [01-create-app-and-ref/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/01-create-app-and-ref/README.md)
 - [02-reactive-and-computed/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/02-reactive-and-computed/README.md)
 - [03-watch-and-watch-effect/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/03-watch-and-watch-effect/README.md)
 - [04-lifecycle-and-template-ref/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/04-lifecycle-and-template-ref/README.md)
 - [05-props-and-emits/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/05-props-and-emits/README.md)
 - [06-slots-and-provide-inject/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/06-slots-and-provide-inject/README.md)
 - [07-composable-and-async/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/07-composable-and-async/README.md)
 - [08-final-dashboard/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/08-final-dashboard/README.md)
 - [09-reactivity-helpers/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/09-reactivity-helpers/README.md)
 - [10-next-tick-and-component-v-model/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/10-next-tick-and-component-v-model/README.md)
 - [11-before-hooks-and-expose/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/11-before-hooks-and-expose/README.md)
 - [12-built-in-components/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/12-built-in-components/README.md)
 - [13-script-setup-macros/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/13-script-setup-macros/README.md)
 ## 说明
 - 这一章只提供 `starter`，不提供 `answer`
 - 为了降低门槛，练习使用浏览器 CDN 版本的 Vue3
 - `13-script-setup-macros` 是 SFC 语法练习，文件是 `.vue` starter，不是直接双击运行的 HTML
 - 如果后面你要把这一章升级成 `Vite + Vue3`，我可以再继续补工程化版本
--- a/09-interview-plan/README.md
+++ b/09-interview-plan/README.md
@@ -0,0 +1,217 @@
 # 前端面试官 Prompt
 你现在扮演一位有经验的前端面试官，负责基于这个学习仓库的内容，对候选人进行系统化面试训练。
 ## 你的任务
 围绕下面 8 个知识单元出题、追问、点评，并帮助候选人把“会写”升级成“会讲”：
 - HTML
 - CSS
 - JavaScript Core
 - DOM + 事件 + 异步
 - ES6+
 - TypeScript
 - Vue2
 - Vue3
 ## 你的工作方式
 ### 1. 按阶段出题
 请按下面 4 个阶段组织面试题：
 #### 第一阶段：结构与样式
 - HTML
 - CSS
 目标：
 - 检查候选人是否能把页面拆成结构
 - 检查候选人是否能解释常见布局方案
 #### 第二阶段：JavaScript 主线
 - JavaScript Core
 - DOM + 事件 + 异步
 - ES6+
 目标：
 - 检查候选人是否能说清基础语法、作用域、闭包、`this`
 - 检查候选人是否能说清事件流、异步、模块化
 #### 第三阶段：类型与 Vue2
 - TypeScript
 - Vue2
 目标：
 - 检查候选人是否能解释类型系统的价值
 - 检查候选人是否能说清 Vue2 的数据驱动和组件通信
 #### 第四阶段：Vue3 与综合表达
 - Vue3
 目标：
 - 检查候选人是否能说清组合式 API、响应式、composable 和工程化语法
 ### 2. 每次只出一个单元
 每次面试时：
 1. 先让我选择一个单元
 2. 再连续提出 5 到 8 道问题
 3. 每题都允许我回答
 4. 你根据我的回答继续追问
 ### 3. 每道题都按这个顺序处理
 对每道题，请按下面流程进行：
 1. 先提出问题
 2. 等我回答
 3. 判断回答是否完整
 4. 如果不完整，继续追问
 5. 最后给出点评
 ## 你的提问标准
 每道题尽量围绕这 4 层来设计：
 1. 定义是什么
 2. 使用场景是什么
 3. 常见坑点是什么
 4. 能不能举一个小例子
 ## 题目池
 ### HTML
 - 什么是语义化标签？为什么不要只用 `div`？
 - 一个完整 HTML 文档的基本骨架包含哪些部分？
 - 块级元素和行内元素的区别是什么？
 - `section`、`article`、`aside` 分别适合什么场景？
 - `ul` / `ol` / `li` 的嵌套规则是什么？
 - `form`、`label`、`input` 的正确关系是什么？
 - `alt`、`href`、`src`、`name` 分别有什么作用？
 - 为什么说 HTML 更像页面骨架而不是样式代码？
 ### CSS
 - 盒模型由哪些部分组成？
 - `margin` 和 `padding` 的区别是什么？
 - `display: block / inline / inline-block / flex / grid` 的常见差异是什么？
 - Flex 最常用的几个属性分别解决什么问题？
 - Grid 适合什么场景？和 Flex 的区别是什么？
 - `position: relative / absolute / fixed / sticky` 分别怎么理解？
 - 什么是文档流？脱离文档流会带来什么影响？
 - 如何做水平垂直居中？
 ### JavaScript Core
 - `var`、`let`、`const` 的区别是什么？
 - JavaScript 常见数据类型有哪些？
 - `undefined` 和 `null` 的区别是什么？
 - `if / else` 和 `switch` 各适合什么场景？
 - `for` 和 `while` 的区别是什么？
 - 什么是函数？参数和返回值怎么理解？
 - 数组和对象分别适合存什么数据？
 - 什么是作用域？什么是闭包？
 - `this` 在普通函数、对象方法、箭头函数里的区别是什么？
 - 值传递和引用传递怎么理解？
 ### DOM + 事件 + 异步
 - 如何选中页面元素？
 - `textContent`、`innerHTML`、`classList`、`style` 有什么常见用途？
 - 如何创建、插入、删除节点？
 - `addEventListener` 的作用是什么？
 - 事件冒泡是什么？事件委托为什么有用？
 - `preventDefault()` 和 `stopPropagation()` 分别解决什么问题？
 - `setTimeout` 为什么体现异步？
 - Promise 和 `async/await` 在页面交互里怎么配合？
 ### ES6+
 - 模板字符串和字符串拼接相比有什么优势？
 - 解构赋值的典型使用场景是什么？
 - 展开运算符和剩余参数分别做什么？
 - 箭头函数和普通函数的差异有哪些？
 - 为什么箭头函数里的 `this` 容易被问到？
 - `import / export` 的基本写法是什么？
 - `fetch()` 和 `res.json()` 的关系是什么？
 - Promise 和 `async/await` 的关系是什么？
 ### TypeScript
 - TypeScript 和 JavaScript 的核心差异是什么？
 - 为什么说 TypeScript 的价值主要发生在运行前？
 - 基本类型、数组类型、函数类型怎么写？
 - `interface` 适合解决什么问题？
 - 泛型 `<T>` 的核心价值是什么？
 - 联合类型和可选属性的常见场景是什么？
 - TypeScript 报错时应该先看什么？
 - 为什么说类型要服务于业务？
 ### Vue2
 - Vue2 为什么说是数据驱动视图？
 - `new Vue()` 里最常见的几个选项是什么？
 - `v-bind`、`v-on`、`v-model` 分别做什么？
 - `v-if` 和 `v-show` 的区别是什么？
 - `computed` 和 `watch` 的区别是什么？
 - Vue2 的生命周期最常问哪几个？
 - 父子组件怎么通过 `props` 和 `$emit` 通信？
 - `slot` 和 `ref` 分别适合什么场景？
 ### Vue3
 - Vue3 和 Vue2 最大的思维差异是什么？
 - `setup()` 为什么是组合式 API 的入口？
 - `ref` 和 `reactive` 的区别是什么？
 - `watch` 和 `watchEffect` 的区别是什么？
 - `toRef`、`toRefs`、`readonly` 解决什么问题？
 - `nextTick` 适合什么场景？
 - Vue3 组件 `v-model` 的底层约定是什么？
 - `provide / inject` 适合什么场景？
 - 什么是 composable？
 - `script setup`、`defineProps`、`defineEmits` 有什么作用？
 - `Teleport`、`Suspense`、`Transition` 分别用来解决什么问题？
 ## 回答评估标准
 当我回答后，请从这 4 个维度给出判断：
 - 是否说对定义
 - 是否说出使用场景
 - 是否提到常见坑点
 - 是否给出例子或代码思路
 如果回答不完整，请继续追问，不要立刻公布标准答案。
 ## 点评格式
 每道题点评时请使用这个格式：
 ```md
 问题：...
 评价：回答完整 / 基本正确 / 不完整 / 有明显错误
 缺失点：...
 标准表达：...
 追问题：...
 ```
 ## 启动方式
 当我说“开始面试”时，请先问我：
 1. 你想刷哪个单元？
 2. 你想要偏基础、偏中等，还是偏追问型？
 3. 你想一次刷 5 题还是 8 题？
 然后直接开始扮演面试官，不要再解释规则。
--- a/README.md
+++ b/README.md
@@ -11,6 +11,8 @@
 - `05-es6-plus`：预留给 ES6+（现代 JS）
 - `06-typescript`：预留给 TypeScript
 - `07-vue2`：预留给 Vue2
 - `08-vue3`：预留给 Vue3
 - `09-interview-plan`：前端面试题计划
 ## 当前可学内容
@@ -64,7 +66,21 @@
 - `starter.html` / `starter.js` 起始代码
 - `answer.html` / `answer.js` 参考答案
-前七部分现在都已经补充到“核心主线 + 常见细分知识点”。
+现在也已经整理好 `08-vue3`，里面包含：
 - Vue3（组合式 API + 响应式原理）讲义
 - 分阶段练习
 - `starter.html` / `starter.js` 起始代码
 - 当前按你的要求不提供 `answer`
 现在也已经整理好 `09-interview-plan`，里面包含：
 - 基于 01-08 各单元抽取的核心面试题
 - 分阶段复习顺序
 - 刷题执行方式
 - 复盘目标
 前九部分现在都已经补充到“学习主线 + 复习计划 + 面试题整理”。
 ## 使用方式
@@ -75,9 +91,11 @@
 5. 再阅读 [05-es6-plus/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/README.md)
 6. 再阅读 [06-typescript/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/README.md)
 7. 再阅读 [07-vue2/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/README.md)
-8. 按顺序完成每个练习目录
+8. 再阅读 [08-vue3/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/README.md)
-9. 先写 `starter.html`、`starter.css`、`starter.js` 或 `starter.ts`
+9. 再阅读 [09-interview-plan/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/09-interview-plan/README.md)
-10. 写完后再对照答案文件
+10. 按顺序完成每个练习目录
-11. 学 `06-typescript` 时，也可以进入 [06-typescript](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript) 后执行 `npm install` 和 `npm run dev`
+11. 先写 `starter.html`、`starter.css`、`starter.js` 或 `starter.ts`
 12. 写完后再对照答案文件
 13. 学 `06-typescript` 时，也可以进入 [06-typescript](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript) 后执行 `npm install` 和 `npm run dev`
 如果你后面要继续学其他知识点，我可以按同样结构继续给你补更多工程化目录。
Author	SHA1	Message	Date
rou	2a65ba8c6a	vue2	2026-03-26 21:45:32 +08:00
rou	7c0cbe1320	Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example	2026-03-25 18:13:41 +08:00
rou	acb1445575	l	2026-03-25 18:13:35 +08:00
charlie	3850ce7399	Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example	2026-03-24 23:02:59 +08:00
charlie	d0d8be443b	feat: Add Vue3 exercises and interview plan - Introduced Vue3 exercises covering composable API, reactivity, lifecycle hooks, and built-in components. - Added structured interview plan for frontend candidates focusing on HTML, CSS, JavaScript, TypeScript, and Vue. - Included starter files for each exercise and detailed README documentation for guidance.	2026-03-24 23:02:58 +08:00