From 74125f1f43215921ed02cf9c35232b8fc1e5e61b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=98=BE=E4=B9=89?= <3515252188@qq.com>
Date: Thu, 29 May 2025 19:05:31 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=BB=83=E4=B9=A0=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...00\347\273\203\344\271\240\351\242\230.md" | 2159 +++++++++++++++++
 1 file changed, 2159 insertions(+)
 create mode 100644 "\347\216\213\346\230\276\344\271\211/\345\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md"

diff --git "a/\347\216\213\346\230\276\344\271\211/\345\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md" "b/\347\216\213\346\230\276\344\271\211/\345\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md"
new file mode 100644
index 0000000..fecb45b
--- /dev/null
+++ "b/\347\216\213\346\230\276\344\271\211/\345\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md"
@@ -0,0 +1,2159 @@
+### 基础练习题
+
+#### 题目 1：显示隐藏按钮
+
+**任务：** 创建一个简单的 Vue 3 应用，页面上有一个按钮和一个段落文本。点击按钮时，使用 `v-if` 控制段落文本的显示和隐藏。
+
+**要求：**
+
+- 段落文本初始状态为显示。
+
+- 点击按钮时，段落文本切换显示和隐藏状态。
+
+  ```vue
+  <template>
+    <input type="button" value="显示和隐藏" @click="some">
+    <h1 v-if="isif">Hello!</h1>
+  </template>
+  <script setup>
+  import {ref} from "vue";
+  
+  let isif = ref(true)
+  
+  function some() {
+    isif.value = !isif.value
+    console.log(123)
+  }
+  </script>
+  ```
+
+  ####  题目 2：显示隐藏切换
+
+  **任务：** 创建一个 Vue 3 应用，页面上有两个按钮和一个段落文本。一个按钮用于显示段落文本，另一个按钮用于隐藏段落文本，使用 `v-show` 实现。
+
+  ```vue
+  <template>
+    <input type="button" value="显示" @click="display">
+    <input type="button" value="隐藏" @click="hide">
+    <h1 v-show="isif">Hello!</h1>
+  </template>
+  <script setup>
+  import {ref} from "vue";
+  
+  let isif = ref(false)
+  
+  function display() {
+    isif.value = true
+    console.log(123)
+  }
+  
+  function hide() {
+    isif.value = false
+    console.log(3)
+  }
+  </script>
+  ```
+
+  
+
+####  题目 3：条件渲染列表
+
+**任务：** 创建一个 Vue 3 应用，页面上有一个输入框和一个按钮，以及一个列表。用户在输入框中输入内容，点击按钮后，将输入的内容添加到列表中。使用 `v-if` 判断列表是否为空，如果为空则显示“列表为空”的提示信息，否则显示列表内容。
+
+```vue
+<template>
+  <input type="text" placeholder="输入框" v-model="key">
+  <input type="button" value="添加到列表" @click="add">
+  <div v-if="items.length===0">
+    列表为空，请添加内容
+  </div>
+  <div v-else>
+    <h1 v-for="item in items">
+      {{item}}
+    </h1>
+  </div>
+
+</template>
+<script setup>
+import {ref} from "vue";
+
+let key = ref('')
+const items=ref([])
+
+function add() {
+  if (key.value) {
+    items.value.push(key.value)
+    key.value=''
+  }
+}
+
+
+</script>
+```
+
+####  题目 4：动态切换组件
+
+**任务：** 创建一个 Vue 3 应用，页面上有两个按钮，分别用于切换显示两个不同的组件。使用 `v-if` 和 `v-else` 实现组件的动态切换。
+
+```vu
+<template>
+  <input type="button" value="显示组件 A " @click="awesome=!awesome">
+  <input type="button" value="显示组件 B " @click="awesome=!awesome">
+
+  <h1 v-if="awesome">这是组件 A</h1>
+  <h1 v-else>这是组件 B</h1>
+
+</template>
+<script setup>
+import {ref} from "vue";
+const awesome=ref(true)
+
+</script>
+```
+
+###  拓展练习题
+
+#### 题目 5：性能对比实验
+
+**任务：** 创建一个 Vue 3 应用，页面上有两个按钮和一个包含大量元素的列表。使用 `v-if` 和 `v-show` 分别控制列表的显示和隐藏，对比两者的性能差异。
+
+```vue
+<template>
+  <div>
+    <input type="button" value="使用 v-if 隐藏" @click="vif">
+    <input type="button" value="使用 v-show 隐藏" @click="vshow"><br>
+    <div v-for="item in list" :key="list.name" v-if="fff" v-show="sss">
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+import {ref} from "vue";
+
+const list = ref([
+  {name: '项1'},
+  {name: '项2'},
+  {name: '项3'},
+  {name: '项4'},
+  {name: '项5'},
+  {name: '项6'},
+  {name: '项7'},
+  {name: '项8'}
+])
+const fff = ref(true)
+const sss = ref(true)
+
+function vif() {
+  fff.value = !fff.value
+  console.log("v-if")
+}
+
+function vshow() {
+  sss.value = !sss.value
+  console.log("v-show")
+}
+</script>
+```
+
+##  五、v-for
+
+### 基础练习题
+
+#### 题目 1：渲染列表
+
+**任务：** 创建一个 Vue 3 应用，页面上有一个数组，使用 `v-for` 将数组中的每个元素渲染到一个列表中。
+
+**要求：**
+
+- 数组初始值为 `['苹果', '香蕉', '橙子']`。
+- 使用 `v-for` 遍历数组，并将每个元素渲染到一个 `<li>` 标签中。
+
+```vue
+<template>
+<div>
+  <ul v-for="item in list">
+    <li>{{item}}</li>
+  </ul>
+</div>
+</template>
+
+
+<script setup>
+  import {ref} from "vue";
+
+  const list=ref(['苹果', '香蕉', '橙子'])
+</script>
+```
+
+####  题目 2：渲染对象列表
+
+**任务：** 创建一个 Vue 3 应用，页面上有一个对象数组，每个对象包含 `name` 和 `age` 属性。使用 `v-for` 将对象数组中的每个对象渲染到一个列表中，显示每个对象的 `name` 和 `age`。
+
+**要求：**
+
+- 对象数组初始值为 `[ { name: '张三', age: 20 }, { name: '李四', age: 22 } ]`。
+
+- 使用 `v-for` 遍历对象数组，并将每个对象的 `name` 和 `age` 渲染到一个 `<li>` 标签中。
+
+  ```vue
+  <template>
+    <div>
+      <ul v-for="item in list">
+        <li>{{ item.name }}-{{item.age}}</li>
+      </ul>
+    </div>
+  </template>
+  
+  
+  <script setup>
+  import {ref} from "vue";
+  
+  const list = ref([{name: '张三', age: 20}, {name: '李四', age: 22}])
+  </script>
+  ```
+
+  ###  进阶练习题
+
+  #### 题目 3：动态添加列表项
+
+  **任务：** 创建一个 Vue 3 应用，页面上有一个输入框和一个按钮，以及一个列表。用户在输入框中输入内容，点击按钮后，将输入的内容添加到列表中。使用 `v-for` 渲染列表。
+
+  **要求：**
+
+  - 列表初始为空。
+  - 用户输入内容并点击按钮后，内容添加到列表中。
+  - 使用 `v-for` 渲染列表。
+  - 参考效果如下图。
+
+  ![screenshots-2025-04-21-10-36-12](https://oss.9ihub.com/test/screenshots-2025-04-21-10-36-12.gif)
+
+```vue
+<template>
+  <div>
+    <input type="text" v-model="items">
+    <input type="button"  value="添加到列表"  @click="postList">
+    <ul v-for="item in list">
+      <li>{{item}}</li>
+    </ul>
+  </div>
+</template>
+
+
+<script setup>
+import {ref} from "vue";
+
+const list = ref([])
+const items=ref('')
+
+function postList(){
+  list.value.push(items.value)
+  items.value=''
+}
+</script>
+```
+
+####  题目 4：渲染嵌套列表
+
+**任务：** 创建一个 Vue 3 应用，页面上有一个嵌套数组，每个子数组包含多个字符串。使用 `v-for` 渲染嵌套列表，外层列表显示子数组的索引，内层列表显示子数组中的每个字符串。
+
+**要求：**
+
+- 嵌套数组初始值为 `[['苹果', '香蕉'], ['橙子', '葡萄']]`。
+- 使用 `v-for` 渲染嵌套列表。
+- 参考效果如下图。
+
+![screenshots-2025-04-21-10-36-49](https://oss.9ihub.com/test/screenshots-2025-04-21-10-36-49.gif)
+
+```vue
+<template>
+  <div>
+    <ul v-for="(value,index) in list">
+      <ul>子数组-{{ index+1 }}
+        <li v-for="(item,index) in value">{{ item }}</li>
+      </ul>
+    </ul>
+  </div>
+</template>
+
+
+<script setup>
+import {ref} from "vue";
+
+const list = ref([['苹果', '香蕉'], ['橙子', '葡萄']])
+
+</script>
+```
+
+###  拓展练习题
+
+#### 题目 5：分组渲染列表
+
+**任务：** 创建一个 Vue 3 应用，页面上有一个对象数组，每个对象包含 `group` 和 `name` 属性。使用 `v-for` 将对象数组中的每个对象按 `group` 分组渲染到不同的列表中。
+
+**要求：**
+
+- 对象数组初始值为 `[ { group: 'A', name: '张三' }, { group: 'B', name: '李四' }, { group: 'A', name: '王五' } ]`。
+- 使用 `v-for` 遍历对象数组，并按 `group` 分组渲染到不同的列表中。
+- 参考效果如下图。
+
+![screenshots-2025-04-21-10-37-44](https://oss.9ihub.com/test/screenshots-2025-04-21-10-37-44.gif)
+
+```vue
+```
+
+##  六、class与style绑定
+
+###  基础练习题
+
+1. 动态绑定单个类名
+
+   - 要求：创建一个 Vue 3 应用，页面上有一个按钮，点击按钮后，按钮的类名在“btn”和“btn-active”之间切换。使用 `v-bind:class` 或简写 `:class` 来实现。
+
+   - 提示：可以使用一个数据属性来控制按钮的类名，点击按钮时切换该属性的值。
+     ```vue
+     <template>
+       <input type="button" value="bian" :class="isActive ? 'btn-active':'btn'"
+              @click="isActive=!isActive"/>
+     </template>
+     
+     <script setup>
+     import {ref} from "vue";
+     
+     const isActive = ref(false)
+     
+     console.log(isActive)
+     </script>
+     
+     <style scoped>
+     .btn-active {
+        background-color: #222222;
+      }
+     
+     .btn {
+       background-color: aqua;
+     }
+     </style>
+     ```
+
+     
+
+2. 绑定对象形式的类
+
+   - 要求：在页面上有一个段落元素 `<p>`，使用对象形式的 `:class` 绑定，使其同时具有“text-center”（居中对齐文本）和“text-red”（文本颜色为红色）这两个类，当点击段落时，切换“text-red”类的绑定状态，即点击一次后文本颜色变为非红色，再次点击恢复为红色。
+
+   - 提示：在 Vue 的 `data` 中定义一个对象，对象的键为类名，值为布尔值，用于控制类的绑定状态。
+     ```vue
+     <template>
+       <p :class="isActive ? 'text-center':'text-red'"
+          @click="isActive=!isActive"> 123</p>
+     </template>
+     
+     <script setup>
+     import {ref} from "vue";
+     
+     const isActive = ref(true)
+     
+     console.log(isActive)
+     </script>
+     
+     <style scoped>
+     .text-center {
+       text-align: center;
+     }
+     
+     .text-red {
+       color: red;
+     }
+     </style>
+     ```
+
+     
+
+3. 数组形式的类绑定
+
+   - 要求：页面上有一个列表，包含三个列表项 `<li>`。使用数组形式的 `:class` 绑定，为每个列表项动态添加一个类名“list-item”，并且当鼠标悬停在某个列表项上时，为其添加“hovered”类，离开时移除该类。
+
+   - 提示：数组中可以包含字符串（静态类名）和对象（动态类名），利用 Vue 的事件绑定来控制动态类名的添加和移除。
+
+     ```vue
+     <template>
+       <ul>
+         <li v-for="(item,index) in item" :key="index"
+             :class="['list_item',{hovered:hoveredId===index}]"
+             @mouseenter="hoveredId=index"
+             @mouseleave="hoveredId=null"
+         >
+           {{ item }}
+         </li>
+       </ul>
+     </template>
+     
+     <script setup>
+     import {ref} from "vue";
+     
+     const item = ref(['1', '2', '3'])
+     const hoveredId=ref(null)
+     </script>
+     
+     
+     <style scoped>
+     .list_item.hovered{
+       background-color: red;
+     }
+     </style>
+     ```
+     
+     
+
+### 中等练习题
+
+1. 综合类名绑定
+   - 要求：创建一个表单输入框 `<input>`，当输入框获得焦点时，为其添加“focused”类，失去焦点时移除该类。同时，根据输入框的值是否为空，动态绑定“valid”（值不为空时）或“invalid”（值为空时）类。使用对象形式的 `:class` 绑定来实现。
+   
+   - 提示：结合 Vue 的事件监听（`@focus`、`@blur`）和数据绑定来控制类名的动态变化。
+   
+     ```vue
+     <template>
+       <input type="text"
+              :class="{
+         focused:isFocused,
+         valid:hasValue,
+         invalid:!hasValue
+              }"
+              @focus="isFocused=true"
+              @blur="isFocused=false"
+              v-model="inputValue"
+       >
+     
+     </template>
+     
+     <script setup>
+     import {computed, ref} from "vue";
+     
+     const inputValue = ref('')
+     const isFocused = ref(false)
+     const hasValue = computed(() => {
+       return inputValue.value.trim() !== ''
+     })
+     </script>
+     
+     
+     <style scoped>
+     input.valid{
+       border-color: aqua;
+     }
+     input.invalid{
+       border-color: red;
+     }
+     
+     input.focused{
+       border-color: blue;
+     }
+     
+     
+     </style>
+     ```
+   
+     
+   
+2. 样式绑定基础
+   - 要求：页面上有一个 `<div>` 元素，使用 `:style` 绑定为其设置背景颜色为“#f0f0f0”，字体大小为“16px”，字体颜色为“#333”。然后添加一个按钮，点击按钮后，将背景颜色改为“#ff0000”，字体大小改为“20px”，字体颜色改为“#fff”。
+   
+   - 提示：可以使用对象形式的 `:style` 绑定，定义一个样式对象，在点击按钮时修改该对象的属性值。
+   
+     ```vue
+     <template>
+     <div :style="boxStyle" class="box">
+       <input type="button" @click="btn" value="123456">
+     </div>
+     
+     </template>
+     
+     <script setup>
+     import {computed, ref} from "vue";
+     const boxStyle=ref({
+       backgroundColor:'#f0f0f0',
+       color:'#333',
+       fontSize:'16px'
+     })
+     
+     function btn(){
+       if (boxStyle.value.color==='#333'){
+         boxStyle.value={
+           backgroundColor:'#ff0000',
+           color:'#fff',
+           fontSize:'20px'
+         }
+       }else {
+         boxStyle.value={
+           backgroundColor:'#f0f0f0',
+           color:'#333',
+           fontSize:'16px'
+         }
+       }
+     
+     }
+     
+     </script>
+     
+     
+     <style scoped>
+     .box{
+       padding: 20px;
+       margin: 20px 0;
+       border-radius: 4px;
+       transition: all 0.3s ease;
+     }
+     
+     </style>
+     ```
+   
+     
+   
+3. 数组形式的样式绑定
+   - 要求：页面上有一个图片元素 `<img>`，使用数组形式的 `:style` 绑定为其设置宽度为“200px”，高度为“200px”。然后添加两个按钮，一个按钮点击后将图片的宽度和高度都扩大到“300px”，另一个按钮点击后将图片的宽度和高度恢复到“200px”。
+   
+   - 提示：数组中可以包含多个样式对象，通过修改数组中的对象来实现样式的动态变化。
+   
+     ```vue
+     <template>
+       <img :style="imgStyle" class="imgs" src="./assets/123456.jpg">
+       <input type="button" value="11111" @click="btn1">
+       <input type="button" value="22222" @click="btn2">
+     </template>
+     
+     <script setup>
+     import { ref} from "vue";
+     
+     
+     const imgStyle = ref([
+       {width: '200px'}, {height: '200px'}
+     ])
+     
+     function btn1() {
+       imgStyle.value = [
+         {width: '300px'},
+         {height: '300px'},
+         {transition: 'all 0.3s ease'}
+       ]
+     }
+     
+     function btn2() {
+       imgStyle.value = [
+         {width: '200px'},
+         {height: '200px'},
+         {transition: 'all 0.3s ease'}
+       ]
+     }
+     
+     </script>
+     
+     
+     <style scoped>
+     
+     
+     </style>
+     ```
+   
+     
+
+##  七、事件处理
+
+### 基础题
+
+1. **按钮点击事件**
+
+   - **题目描述**：创建一个简单的 Vue 3 应用，页面上有一个按钮，当点击按钮时，页面上显示“按钮被点击了”。
+
+     ```vue
+     <template>
+       <div>
+         <input type="button" value="按钮" @click="btn">
+         <p v-if="clicked">按钮被点击了</p>
+       </div>
+     </template>
+     
+     <script setup>
+     import {ref} from "vue";
+     
+     const clicked=ref(false)
+     
+     function btn(){
+       clicked.value=true
+     }
+     
+     </script>
+     ```
+
+     
+
+2. **输入框输入事件**
+
+   - **题目描述**：创建一个 Vue 3 应用，页面上有一个输入框，当用户在输入框中输入内容时，页面上实时显示输入的内容。
+
+     ```vue
+     <template>
+       <div>
+         <input type="text" v-model="te">
+         <div>{{te}}</div>
+       </div>
+     </template>
+     
+     <script setup>
+     import {ref} from "vue";
+     
+     const te=ref('')
+     
+     </script>
+     ```
+
+     
+
+### 中等题
+
+1. **表单提交事件**
+
+   - **题目描述**：创建一个 Vue 3 应用，页面有一个上表单，表单中有用户名和密码输入框，当点击提交按钮时，验证用户名和密码是否为空，如果为空，则在页面上显示相应的提示信息。
+
+     ```vue
+     <template>
+       <div>
+         用户名:<input type="text" placeholder="输入用户名" v-model="Name"><br>
+         密码:<input type="text" placeholder="输入密码" v-model="password"><br>
+         提交:<input type="button" value="提交" @click="btn">
+         <ul v-for="(item,index) in list" :key="index">
+           用户名:{{ item.Name }}
+           密码:{{item.password}}
+     
+         </ul>
+       </div>
+     </template>
+     
+     <script setup>
+     import {ref} from "vue";
+     
+     const Name = ref('')
+     const password = ref('')
+     const list = ref([])
+     
+     function btn() {
+       if (!Name.value || !password.value) {
+          alert('请输入用户名和密码！')
+         return
+       }
+       list.value.push({
+         Name:Name.value,
+         password:password.value
+       })
+       console.log(list.value)
+     
+       Name.value=''
+       password.value=''
+     }
+     
+     </script>
+     ```
+
+     
+
+2. **鼠标事件**
+
+   - **题目描述**：创建一个 Vue 3 应用，页面上有一个按钮，当鼠标移入按钮时，按钮的背景颜色变为红色，当鼠标移出按钮时，按钮的背景颜色恢复为默认颜色。
+
+     ```vue
+     <template>
+       <div>
+         <input class="btn"
+                type="button"
+                value="按钮"
+                :class="{'mo':mouse}"
+                @mousemove="mouse=true"
+                @mouseleave="mouse=false">
+       </div>
+     </template>
+     
+     <script setup>
+     import {ref} from "vue";
+     
+     const mouse = ref(false)
+     console.log(mouse)
+     
+     </script>
+     
+     <style scoped>
+     .btn {
+       background-color: red;
+     }
+     .btn.mo{
+       background-color: black;
+     }
+     </style>
+     ```
+
+     
+
+### 拓展题
+
+1. 事件修饰符和键盘事件
+
+   - **题目描述**：创建一个 Vue 3 应用，页面上有一个输入框，当用户按下回车键时，页面上显示输入的内容，并清空输入框。
+
+     ```vue
+     <template>
+       <div>
+         <input type="text" v-model="text" @keyup.enter="btn">
+         <ul v-for="(item,index) in list" :key="index">
+           {{ item.text }}
+         </ul>
+       </div>
+     </template>
+     
+     <script setup>
+     import {ref} from "vue";
+     const text=ref('')
+     const list=ref([])
+     
+     const btn=()=>{
+       if (!text.value){
+         alert('输入内容')
+         return
+       }
+       list.value.push({text:text.value})
+       text.value=''
+     }
+     
+     </script>
+     
+     
+     ```
+
+     
+
+##  九、侦听器
+
+### 基础练习
+
+1. **监听简单数据变化**：
+
+   - 要求：创建一个简单的 Vue3 应用，页面上有一个按钮和一个显示数字的文本。点击按钮使数字加1，使用侦听器监听该数字的变化，当数字变化时在控制台打印新值和旧值。
+   - 参考效果如下：
+
+   ![screenshots-2025-04-27-10-19-35](https://oss.9ihub.com/test/screenshots-2025-04-27-10-19-35.gif)
+
+```vue
+<template>
+<div>
+  <input type="button" value="增加数值" @click="btn">
+  <h2>当前数值：{{number}}</h2>
+</div>
+</template>
+
+
+<script setup>
+import {ref,watch} from "vue";
+let number=ref(0)
+function btn(){
+  number.value++
+}
+watch(number,(newValue,oldValue)=>{
+  console.log("new:",newValue,"    old:",oldValue)
+})
+
+
+</script>
+```
+
+2.**监听对象属性变化**：
+
+- 要求：创建一个包含姓名和年龄的对象，通过输入框分别修改姓名和年龄，使用侦听器分别监听姓名和年龄的变化，并在控制台打印变化信息。
+- 参考效果如下：
+
+![screenshots-2025-04-27-10-21-20](https://oss.9ihub.com/test/screenshots-2025-04-27-10-21-20.gif)
+
+```vue
+<template>
+<div>
+  <input type="text" v-model="Name"/><br>
+  <input type="text" v-model="Age"/>
+</div>
+</template>
+
+
+<script setup>
+import {ref,watch} from "vue";
+const Name=ref('123')
+const Age=ref("100")
+
+watch(Name,(newValue,oldValue)=>{
+  console.log("Name:",newValue,"->",oldValue)
+})
+watch(Age,(newValue,oldValue)=>{
+  console.log("Age:",newValue,"->",oldValue)
+})
+
+
+</script>
+```
+
+###  进阶练习
+
+1. 1. **深度监听对象变化**：
+
+      - 要求：创建一个包含多个属性的对象，如商品信息对象，包含价格、数量等属性。通过输入框修改这些属性的值，使用侦听器深度监听该对象的变化，当对象内部属性发生变化时在控制台打印变化信息。
+      - 参考效果如下：
+
+      ![screenshots-2025-04-27-10-23-04](https://oss.9ihub.com/test/screenshots-2025-04-27-10-23-04.gif)
+
+      ```vue
+      <template>
+        <div>
+          <input type="text" v-model="people.Name"/><br>
+          <input type="text" v-model="people.Age"/>
+        </div>
+      </template>
+      
+      
+      <script setup>
+      import {ref, watch} from "vue";
+      
+      const people = ref({
+        Name: "张三",
+        Age: '1'
+      })
+      
+      watch(people, (newVal, oldValue) => {
+            console.group("人员信息变化");
+            console.log("new", newVal, " old", oldValue)
+            console.groupEnd();
+          },
+          {deep: true}
+      )
+      
+      watch(() => people.value.Age, (newAge, oldAge) => {
+        console.log(`年龄从 ${oldAge} 变为 ${newAge}`)
+      })
+      
+      
+      </script>
+      ```
+
+      
+
+2. **使用 immediate 选项**：
+
+   - 要求：创建一个计数器应用，页面上有一个按钮和一个显示计数器数值的文本。点击按钮使计数器加1，使用侦听器监听计数器数值的变化，并在控制台打印新值和旧值。同时，要求在组件创建时立即执行一次侦听器的回调函数，打印初始值。
+   - 参考效果如下：
+
+   ![screenshots-2025-04-27-10-24-30](https://oss.9ihub.com/test/screenshots-2025-04-27-10-24-30.gif)
+
+```vue
+<template>
+  <div>
+    <input type="button" value="数值变化" @click="btn"/>
+    <h2>{{ number }}</h2>
+  </div>
+</template>
+
+
+<script setup>
+import {ref, watch} from "vue";
+
+const number = ref(0)
+
+function btn() {
+  number.value++
+}
+
+watch(number, (newVal, oldVal) => {
+      console.log("new", newVal, "old", oldVal)
+    },
+    {immediate: true}
+)
+
+
+</script>
+```
+
+###  综合练习
+
+1. **监听数组变化并更新视图**：
+
+   - 要求：创建一个包含多个任务的数组，每个任务包含任务名称和是否完成的布尔值。页面上显示任务列表，每个任务旁边有复选框用于标记任务是否完成。使用侦听器监听任务数组的变化，当任务的完成状态发生变化时，更新页面上任务的显示样式（如已完成的任务显示为灰色）。
+   - 参考效果如下：
+
+   ![screenshots-2025-04-27-10-26-15](https://oss.9ihub.com/test/screenshots-2025-04-27-10-26-15.gif)
+
+```vue
+<template>
+  <div>
+    <input type="checkbox" v-model="test.btn1"> 任务1<br>
+    <input type="checkbox" v-model="test.btn2"> 任务2<br>
+    <input type="checkbox" v-model="test.btn3"> 任务3<br>
+  </div>
+</template>
+
+
+<script setup>
+import {ref, watch} from "vue";
+
+const test = ref({
+  btn1: false,
+  btn2: false,
+  btn3: true,
+})
+
+watch(test, (newVal, oldVal) => {
+  console.group('值变化')
+  console.log("new:", newVal, " old", oldVal)
+  console.groupEnd()
+},{
+  deep:true
+})
+
+
+</script>
+```
+
+## 十一、组件基础
+
+### 基础练习
+
+#### 1. 定义和使用简单组件
+
+- **要求**：创建一个简单的组件 `HelloWorld`，该组件显示一个欢迎信息（如“Hello, Vue3!”）。在父组件中引入并使用该组件。
+
+  ```vue
+  <template>
+    <div>
+      <h1>
+        <Hello></Hello>
+      </h1>
+    </div>
+  </template>
+  
+  
+  <script setup>
+  import Hello from "@/components/Hello.vue";
+  
+  
+  </script>
+  ```
+
+  
+
+#### 传递属性（Props）
+
+- **要求**：扩展 `HelloWorld` 组件，使其能够通过 `props` 接收一个名字，并显示欢迎信息（如“Hello, [名字]!”）。在父组件中传递不同的名字。
+- **参考效果如下**：
+
+![screenshots-2025-04-27-10-38-07](https://oss.9ihub.com/test/screenshots-2025-04-27-10-38-07.gif)
+
+```vue
+//HelloWorld.vue
+<template>
+  <div class="hello">
+    <h1>{{Message}}</h1>
+  </div>
+</template>
+<script setup>
+import {computed} from "vue";
+
+const props = defineProps({
+  name:{
+    type:String,
+    default:'World'
+  }
+})
+
+const Message=computed(()=>`Hello,${props.name}`)
+</script>
+<style scoped>
+.hello {
+  color: #42b983;
+  font-size: 1.5em;
+}
+</style>
+```
+
+```vue
+// App.vue
+<template>
+<div>
+  <HelloWorld name="name"/>
+  <HelloWorld name="name1"/>
+  <HelloWorld name="name2"/>
+  <HelloWorld/>
+  <input v-model="ip" placeholder="输入">
+  <HelloWorld :name="ip"/>
+</div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import HelloWorld from "@/components/HelloWorld.vue";
+
+
+const ip=ref('')
+</script>
+```
+
+###  进阶练习
+
+#### 3. 自定义事件
+
+- **要求**：创建一个 `ButtonCounter` 组件，该组件包含一个按钮和一个计数器。每次点击按钮时，计数器加1，并通过自定义事件将当前计数值传递给父组件。
+- **参考效果如下**：
+
+![screenshots-2025-04-27-10-40-26](https://oss.9ihub.com/test/screenshots-2025-04-27-10-40-26.gif)
+
+```vue
+// ButtonCounter
+<script setup>
+import {ref} from "vue";
+const count=ref(0)
+
+const emit =defineEmits(['count_update'])
+function btn(){
+  count.value++
+  emit('count_update',count.value)
+}
+
+</script>
+
+<template>
+<button @click="btn">点击计数:{{count}}</button>
+</template>
+
+<style scoped>
+
+</style>
+```
+
+```vue
+// app.vue
+
+<template>
+  <ButtonCounter @count_update="btn1"></ButtonCounter>
+  <h1>按钮计数器示例{{item}}</h1>
+</template>
+<script setup>
+
+import ButtonCounter from "@/components/ButtonCounter.vue";
+import {ref} from "vue";
+const item=ref(0)
+function btn1(count){
+  item.value=count
+}
+
+</script>
+```
+
+####  4. 使用插槽（Slots）
+
+- **要求**：创建一个 `Card` 组件，该组件包含一个标题和一个内容区域。通过插槽允许父组件自定义标题和内容。
+- **参考效果如下**：
+
+![screenshots-2025-04-27-10-44-22](https://gitee.com/njy2/picture-bed/raw/master/imgs/202505291541019.gif)
+
+```vue
+//Card.vue
+
+<script setup>
+
+</script>
+
+<template>
+  <slot name="title">123456</slot>
+  <slot name="body">789789</slot>
+
+</template>
+
+<style scoped>
+
+</style>
+```
+
+```vue
+// App.vue
+<template>
+  <Card>
+    <template #title>
+      <h1>自定义标题</h1>
+    </template>
+
+    <template #body>
+      <h3>自定义标题</h3>
+    </template>
+  </Card>
+
+</template>
+<script setup>
+
+import Card from "@/components/Card.vue";
+</script>
+```
+
+### 综合练习
+
+#### 5. 组件组合与数据传递
+
+- **要求**：创建一个 `UserProfile` 组件，该组件包含用户的基本信息（如用户名、邮箱）和一个按钮。点击按钮时，通过自定义事件将用户信息传递给父组件。父组件接收用户信息并显示在页面上。
+- **参考效果如下**：
+
+![screenshots-2025-04-27-10-48-35](https://gitee.com/njy2/picture-bed/raw/master/imgs/202505291607748.gif)
+
+ ```vue
+ //UserProfile.vue
+ 
+ <script setup>
+ import {ref} from "vue";
+ 
+ const emit = defineEmits(['user'])
+ 
+ const user={
+   username:'张三',
+   email:'123456@gmail.com'
+ }
+ function btn() {
+   emit('user', user)
+ }
+ 
+ </script>
+ 
+ <template>
+ 
+   <h1>用户信息</h1>
+   <p>用户名: {{ user.username }}</p>
+   <p>邮箱: {{ user.email }}</p>
+   <button @click="btn">发送用户信息</button>
+ </template>
+ 
+ <style scoped>
+ 
+ </style>
+ ```
+
+```vue
+//app.vue
+<template>
+<UserProfile @user="btn"></UserProfile>
+  <div v-html="user_info"></div>
+</template>
+<script setup>
+import UserProfile from "@/components/UserProfile.vue";
+import {ref} from "vue";
+
+const user_info=ref('')
+
+function btn(data){
+  user_info.value=`
+  <h2>接收到的用户信息：</h2>
+  <p>用户名:${data.username}</p>
+  <p>邮箱:${data.email}</p>
+  `
+}
+</script>
+```
+
+
+
+#### 6. 动态组件与条件渲染
+
+- **要求**：创建一个 `Tab` 组件，允许用户切换不同的标签页。每个标签页显示不同的内容。通过动态组件和条件渲染实现标签页的切换。
+- **参考效果如下**：
+
+![screenshots-2025-04-27-10-58-21](https://oss.9ihub.com/test/screenshots-2025-04-27-10-58-21.gif)
+
+```vue
+<template>
+  <input type="button" v-for="(tap,index) in button"
+         :value="tap" @click="btn(index)">
+
+  <component :is="tabs[Tap]"></component>
+</template>
+<script setup>
+import {ref} from "vue";
+import Home from "@/components/Home.vue";
+import Profile from "@/components/Profile.vue";
+import Setting from "@/components/Setting.vue";
+
+const tabs = [Home, Profile, Setting]
+
+const button = ["Home", "Profile", "Setting"]
+
+const Tap = ref(0)
+
+function btn(index) {
+  Tap.value = index
+}
+
+</script>
+```
+
+```vue
+<template>
+  <h1>Home</h1>
+  <p>欢迎来到首页</p>
+</template>
+```
+
+```vue
+<template>
+  <h1>Profile</h1>
+  <p>用户资料页面</p>
+</template>
+```
+
+```vue
+<template>
+  <h1>Settings</h1>
+  <p>设置页面</p>
+</template>
+```
+
+
+
+## 十二、路由
+
+### 基础练习题
+
+1. **创建基本路由**
+
+   - 使用 Vue 3 和 Vue Router 创建一个简单的单页面应用，包含两个页面：`Home` 和 `About`。
+   - 要求：
+     - 使用 `vue-router` 的最新版本。
+     - 在 `Home` 页面显示“欢迎来到首页！”的文本。
+     - 在 `About` 页面显示“这是关于页面！”的文本。
+     - 使用 `<router-link>` 实现页面之间的导航。
+   - 提示：参考 Vue Router 的基本安装和配置方法。
+
+   ```vue
+   <template>
+     <!-- 创建路由链接 -->
+     <RouterLink to="/">home</RouterLink>
+     <RouterLink to="/about">About</RouterLink>
+     <!-- 渲染当前 URL 路径对应的路由组件 -->
+     <RouterView></RouterView>
+   </template>
+   
+   <script setup>
+   import {RouterLink,RouterView} from "vue-router";
+   </script>
+   
+   ```
+
+   ```js
+   import { createRouter, createWebHistory } from 'vue-router'
+   
+   
+   const router = createRouter({
+     history: createWebHistory(import.meta.env.BASE_URL),
+     routes: [
+       {
+         path: '/',
+         name: 'home',
+         component: ()=>import('@/components/Home.vue'),
+       },
+       {
+         path: '/about',
+         name: 'about',
+         // route level code-splitting
+         // this generates a separate chunk (About.[hash].js) for this route
+         // which is lazy-loaded when the route is visited.
+         component: () => import('@/components/About.vue'),
+       },
+     ],
+   })
+   
+   export default router
+   
+   ```
+
+   
+
+2. **动态路由匹配**
+
+   - 在上述基础上，添加一个动态路由 `/user/:id`，用于显示用户信息。
+
+   - 要求：
+
+     - 创建一个名为 `User` 的组件。
+     - 在 `User` 组件中，通过 `$route.params.id` 获取动态参数，并在页面上显示“用户ID为：[id]”。
+     - 在 `Home` 页面添加一个按钮，点击后跳转到 `/user/123`。
+
+   - 提示：动态路由的定义格式为 `path: '/user/:id'`。
+
+     ```vue
+     <template>
+       <h1>首页</h1>
+       <button @click="btn">查看用户123</button>
+       </template>
+       
+       <script setup>
+       import {useRouter} from "vue-router";
+       
+       let router = useRouter();
+       function btn(){
+         router.push('/user/123')
+         console.log(123);
+         
+       }
+       </script>
+     //Home.vue
+     ```
+
+     ```vue
+     <script setup>
+     import {useRoute} from "vue-router";
+     
+     let route = useRoute();
+     const userId = route.params.id;
+     </script>
+     
+     <template>
+       <h1>用户 ID 为：{{ userId }}</h1>
+       
+     </template>
+     
+     <style scoped>
+     
+     </style>
+     
+     ```
+
+     ```vue
+     <template>
+       <router-view/> 
+     </template>
+     
+     ```
+
+     
+
+3. **嵌套路由**
+
+   - 在 `About` 页面中添加两个子页面：`About/Team` 和 `About/History`。
+
+   - 要求：
+
+     - 在 `About` 组件中使用 `<router-view>` 渲染子页面。
+     - 在 `About/Team` 页面显示“这是团队页面！”。
+     - 在 `About/History` 页面显示“这是历史页面！”。
+     - 在 `About` 页面添加两个链接，分别跳转到 `About/Team` 和 `About/History`。
+
+   - 提示：嵌套路由的配置需要在父路由的 `children` 属性中定义子路由。
+
+     ```vue
+     <template>
+     <router-link to="/about/team">团队介绍</router-link>
+     <router-link to="/about/history">发展历史</router-link>
+     
+     <router-view></router-view>
+     </template>
+     
+     <script setup>
+     </script>
+     
+     ```
+
+     ```js
+     import { createRouter, createWebHistory } from 'vue-router'
+     
+     
+     const router = createRouter({
+       history: createWebHistory(import.meta.env.BASE_URL),
+       routes: [
+         {
+           path: '/',
+           name: 'home',
+           component: ()=>import('@/components/Home.vue'),
+         },
+         {
+           path: '/about',
+           name: 'about',
+           component: () => import('@/components/About.vue'),
+           children: [
+             {
+               path: 'team',
+               component:()=>import('@/components/Team.vue')
+             },
+             {
+               path: 'history',
+               component:()=>import('@/components/History.vue')
+             }
+           ]
+         },
+         {
+           path:'/user/:id',
+           component:()=>import('@/components/User.vue')
+         }
+       ],
+     })
+     
+     export default router
+     
+     ```
+
+     ```vue
+     <template>
+         <h3>这是团队页面！</h3>
+         <p>团队成员信息...</p>
+     </template>
+     ```
+
+     ```vue
+     <template>
+          <h3>这是历史页面！</h3>
+          <p>公司发展历程...</p>
+     </template>
+     ```
+
+     
+
+### 中级练习题
+
+4. **路由守卫（全局守卫）**
+
+   - 在项目中添加全局路由守卫，实现以下功能：
+
+     - 当用户访问 `/about` 页面时，弹出一个确认框，询问用户是否继续。
+     - 如果用户点击“确定”，则允许访问；如果点击“取消”，则取消导航。
+
+   - 要求：
+
+     - 使用 `router.beforeEach` 全局前置守卫。
+     - 在确认框中显示“确定要访问关于页面吗？”。
+
+   - 提示：全局前置守卫的回调函数参数为 `(to, from, next)`，其中 `next` 用于控制导航是否继续。
+
+     ```js
+     // src/router/index.js (在路由实例创建后添加守卫)
+     import { createRouter } from 'vue-router'
+     
+     const router = createRouter({ /*...路由配置...*/ })
+     
+     // 全局前置守卫
+     router.beforeEach((to, from, next) => {
+       if (to.path === '/about') {
+         const answer = window.confirm('确定要访问关于页面吗？')
+         answer ? next() : next(false)
+       } else {
+         next()  // 确保其他路径通行
+       }
+     })
+     
+     export default router
+     
+     ```
+
+     
+
+5. **路由守卫（组件内守卫）**
+
+   - 在 `User` 组件中添加组件内路由守卫，实现以下功能：
+
+     - 当用户离开 `User` 页面时，弹出一个提示框，显示“您正在离开用户页面！”。
+
+   - 要求：
+
+     - 使用组件内的 `beforeRouteLeave` 守卫。
+     - 在提示框中显示指定内容。
+
+   - 提示：组件内守卫可以直接在组件的 `beforeRouteLeave` 钩子中实现。
+
+     ```vue
+     <template>
+       <h1>用户 ID 为：{{ userId }}</h1>
+     
+     </template>
+     
+     
+     <script setup>
+     import { useRoute } from "vue-router";
+     import { onBeforeRouteLeave } from 'vue-router'
+     let route = useRoute();
+     const userId = route.params.id;
+     
+     onBeforeRouteLeave(() => {
+       alert('您正在离开用户页面！')
+     })
+     </script>
+     //User.vue
+     
+     ```
+
+     ```vue
+     //Home.vue
+     <template>
+       <h1>首页</h1>
+       <button @click="btn">查看用户123</button>
+       </template>
+       
+       <script setup>
+       import {useRouter} from "vue-router";
+       
+       let router = useRouter();
+       function btn(){
+         router.push('/user/123')
+         console.log(123);
+         
+       }
+       </script>
+     ```
+
+     
+
+6. **路由元信息（Meta Fields）**
+
+   - 在路由配置中为 `Home` 和 `About` 页面添加元信息，分别设置标题为“首页”和“关于”。
+
+   - 要求：
+
+     - 在路由定义中使用 `meta` 属性，例如：
+
+       ```javascript
+       {
+         path: '/home',
+         component: Home,
+         meta: { title: '首页' }
+       }
+       ```
+
+     - 在全局导航守卫中，根据当前路由的 `meta.title` 动态设置页面标题。
+
+   - 提示：可以通过 `document.title` 设置页面标题。
+
+     ```js
+     // src/router/index.js
+     const routes = [
+       {
+         path: '/',
+         name: 'Home',
+         component: () => import('@/views/Home.vue'),
+         meta: {
+           title: '首页'  // 元数据声明
+         }
+       },
+       {
+         path: '/about',
+         name: 'About',
+         component: () => import('@/views/About.vue'),
+         meta: {
+           title: '关于我们'
+         },
+         children: [
+           // 嵌套子路由配置
+         ]
+       }
+     ]
+     // 在路由实例中添加全局守卫
+     router.beforeEach((to) => {
+       // 获取最深层的有效标题（支持嵌套路由）
+       const activeRoute = to.matched
+         .slice()  // 克隆数组避免修改原数据
+         .reverse()  // 从深层路由开始查找
+         .find(r => r.meta?.title)
+     
+       document.title = activeRoute?.meta.title || '默认标题'
+     })
+     
+     ```
+
+     
+
+     
+
+### 高级练习题
+
+7. **路由懒加载**
+
+   - 对项目中的路由组件进行懒加载优化，以减少初始加载时间。
+
+   - 要求：
+
+     - 使用 ES6 的动态导入语法（`import()`）对 `Home`、`About` 和 `User` 组件进行懒加载。
+     - 确保懒加载的组件在首次访问时才加载。
+
+   - 提示：懒加载的路由配置示例：
+
+     ```javascript
+     {
+       path: '/home',
+       component: () => import('./views/Home.vue')
+     }
+     ```
+
+   ```js
+   // 导出Vue路由模块
+   export const routes = [
+     {
+       path: "/User",
+       component: () => import("@/components/User.vue"),
+     },
+     {
+       path: "/Home",
+       component: () => import("@/components/Home.vue"),
+     },
+     {
+       path: "/About",
+       component: () => import("@/components/About.vue"),
+     },
+   ];
+   ```
+
+   
+
+8. **自定义路由滚动行为**
+
+   - 在项目中实现自定义路由滚动行为，当用户在不同页面之间切换时，页面滚动到顶部。
+
+   - 要求：
+
+     - 使用 Vue Router 提供的 `scrollBehavior` 配置。
+     - 当用户从一个页面跳转到另一个页面时，页面自动滚动到顶部。
+
+   - 提示：`scrollBehavior` 的配置示例：
+
+     ```javascript
+     const router = createRouter({
+       history: createWebHistory(),
+       routes: [...],
+       scrollBehavior(to, from, savedPosition) {
+         return { top: 0 };
+       }
+     });
+     ```
+
+     ```js
+     // 导入依赖包
+     import { createRouter, createWebHistory } from "vue-router";
+     
+     // 导入Vue路由模块
+     import { routes } from "@/routes";
+     
+     // 创建并导出实例
+     export const router = createRouter({
+       history: createWebHistory(),
+       routes,
+       scrollBehavior(to, from, savedPosition) {
+         return { top: 10 };
+       },
+     });
+     ```
+
+     ```js
+     // 导出Vue路由模块
+     export const routes = [
+       {
+         path: "/User",
+         component: () => import("@/components/User.vue"),
+       },
+       {
+         path: "/Home",
+         component: () => import("@/components/Home.vue"),
+       },
+       {
+         path: "/About",
+         component: () => import("@/components/About.vue"),
+       },
+     ];
+     ```
+
+     
+
+9. **多视图路由**
+
+   - 在项目中实现多视图路由，创建一个布局页面 `Layout`，并在其中包含两个视图：
+
+     - 一个用于显示主内容（`Home` 和 `About` 页面）。
+     - 一个用于显示侧边栏（`Sidebar` 组件）。
+
+   - 要求：
+
+     - 在 `Layout` 组件中使用两个 `<router-view>`，分别绑定到不同的命名视图。
+     - 在路由配置中，为 `Home` 和 `About` 页面指定主内容视图，为 `Sidebar` 组件指定侧边栏视图。
+
+   - 提示：命名视图的配置示例：
+
+     ```javascript
+     {
+       path: '/home',
+       components: {
+         default: Home,
+         sidebar: Sidebar
+       }
+     }
+     ```
+
+     ```js
+     import Sidebar from "@/components/Sidebar.vue";
+     
+     // 导出Vue路由模块
+     export const routes = [
+       {
+         path: "/Layout",
+         component: () => import("@/components/Layout.vue"),
+         children: [
+           {
+             path: "/Home",
+             components: {
+               default: () => import("@/components/Home.vue"),
+               Sidebar: () => import("@/components/Sidebar.vue"),
+             },
+           },
+           {
+             path: "/About",
+             components: {
+               default: () => import("@/components/About.vue"),
+               Sidebar: () => import("@/components/Sidebar.vue"),
+             },
+           },
+         ],
+       },
+     ];
+     ```
+
+     ```vue
+     <template>
+       <!-- 创建路由链接 -->
+       <RouterLink to="/Home">Home</RouterLink>
+       <RouterLink to="/About">About</RouterLink>
+       <!-- 渲染当前 URL 路径对应的路由组件 -->
+       <RouterView></RouterView>
+       <RouterView name="Sidebar"></RouterView>
+     </template>
+     
+     <script setup>
+     // 导入依赖包
+     import { RouterLink, RouterView } from "vue-router";
+     </script>
+     ```
+
+     
+
+## 十三、嵌套路由
+
+### 基础题目
+
+#### 题目1：实现简单的嵌套路由
+
+**任务描述**：创建一个 Vue 3 项目，包含一个父路由和两个子路由。父路由的路径为 `/parent`，子路由分别为 `/child1` 和 `/child2`。父路由组件中显示一个导航栏，点击导航栏的链接可以切换到对应的子路由组件。
+
+**要求**：
+
+1. 使用 Vue Router 4 配置嵌套路由。
+2. 父路由组件中显示一个导航栏，导航栏包含两个链接，分别指向 `/parent/child1` 和 `/parent/child2`。
+3. 子路由组件中分别显示不同的内容。
+
+**提示**：
+
+- 在路由配置中定义嵌套路由。
+- 使用 `<router-link>` 实现导航链接。
+- 使用 `<router-view>` 显示子路由组件。
+
+```vue
+<template>
+    <div class="nav">
+        <div class="left">
+            <RouterLink to="/child1">子路由1</RouterLink>
+            <RouterLink to="/child2">子路由2</RouterLink>
+        </div>
+        <div class="right">
+            <RouterView></RouterView>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { RouterLink, RouterView } from 'vue-router';
+</script>
+```
+
+```js
+// 导出Vue路由模块
+export const routes = [
+  {
+    path: '/parent',
+    // component: () => import('@/components/Home.vue'),
+    children: [
+      {
+        path: '/child1',
+        component: () => import('@/components/Child1.vue'),
+      },
+      {
+        path: '/child2',
+        component: () => import('@/components/Child2.vue'),
+      }
+    ],
+  },
+]
+```
+
+
+
+#### 题目2：动态嵌套路由
+
+**任务描述**：在上一题的基础上，将子路由的路径改为动态路径，例如 `/parent/:id`，并通过路由参数传递数据。
+
+**要求**：
+
+1. 修改路由配置，将子路由路径改为动态路径。
+2. 在父路由组件中添加一个输入框，用户输入的值作为子路由的参数。
+3. 在子路由组件中显示传递的参数。
+
+**提示**：
+
+- 使用动态路由匹配。
+- 在子路由组件中通过 `this.$route.params` 获取参数。
+
+```vue
+<template>
+    <div class="nav">
+        <div class="left">
+            <input type="text" placeholder="子路由1" v-model="content" />
+            <input type="button" value="发送" @click="btn" />
+            <RouterLink to="/child1">子路由1</RouterLink>
+            <RouterLink to="/child2">子路由2</RouterLink>
+        </div>
+        <div class="right">
+            <RouterView></RouterView>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { RouterLink, RouterView, useRouter } from 'vue-router';
+
+import { ref } from "vue"
+
+const content = ref("")
+
+const router = useRouter()
+
+function btn() {
+    router.push(`/child1/${content.value}`)
+}
+</script>
+```
+
+```js
+// 导出Vue路由模块
+export const routes = [
+  {
+    path: '/parent',
+    // component: () => import('@/components/Home.vue'),
+    children: [
+      {
+        path: '/child1/:id?',
+        component: () => import('@/components/Child1.vue'),
+      },
+      {
+        path: '/child2',
+        component: () => import('@/components/Child2.vue'),
+      }
+    ],
+  },
+]
+```
+
+
+
+### 中等难度题目
+
+#### 题目3：嵌套路由的多级嵌套
+
+**任务描述**：创建一个包含三级嵌套路由的项目。父路由路径为 `/parent`，子路由路径为 `/child`，孙子路由路径为 `/grandchild`。每个层级的组件都显示不同的内容，并提供导航链接。
+
+**要求**：
+
+1. 配置三级嵌套路由。
+2. 在父路由组件中提供导航到子路由的链接。
+3. 在子路由组件中提供导航到孙子路由的链接。
+4. 在孙子路由组件中显示内容。
+
+**提示**：
+
+- 使用多级嵌套路由配置。
+- 在每个层级的组件中使用 `<router-view>` 显示子组件。
+
+```vue
+<template>
+    <div class="nav">
+        <div class="left">
+            <RouterLink to="/child" active-class="ac">子路由</RouterLink>
+        </div>
+        <div class="right">
+            <RouterView></RouterView>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { RouterLink, RouterView } from 'vue-router';
+</script>
+
+```
+
+```vue
+<template>
+    <p>child的内容</p>
+    <div class="nav">
+        <div class="left">
+            <RouterLink to="/grandchild" active-class="ac">孙子路由</RouterLink>
+        </div>
+        <div class="right">
+            <RouterView></RouterView>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { RouterLink, RouterView } from 'vue-router';
+</script>
+```
+
+
+
+```js
+// 导出Vue路由模块
+export const routes = [
+  {
+    path: '/parent',
+    children: [
+      {
+        path: '/child',
+        component: () => import('@/components/Child.vue'),
+        children: [
+          {
+            path: '/grandchild',
+            component: () => import('@/components/Grandchild.vue'),
+          }
+        ]
+      }
+    ],
+  },
+]
+```
+
+
+
+#### 题目4：嵌套路由的参数传递与默认值
+
+**任务描述**：在嵌套路由中，子路由和孙子路由都需要接收参数。如果参数未传递，则显示默认值。
+
+**要求**：
+
+1. 修改上一题的路由配置，为子路由和孙子路由添加动态参数。
+2. 在子路由和孙子路由组件中，如果参数未传递，则显示默认值。
+3. 在父路由组件中提供导航链接，用户可以选择是否传递参数。
+
+**提示**：
+
+- 使用动态路由匹配。
+- 在组件中通过 `this.$route.params` 获取参数，并设置默认值。
+
+```vue
+<template>
+    <div class="nav">
+        <div class="left">
+            <RouterLink to="/child" active-class="ac">子路由</RouterLink>
+        </div>
+        <div class="right">
+            <RouterView></RouterView>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { RouterLink, RouterView } from 'vue-router';
+</script>
+```
+
+```vue
+<template>
+    <p>child的内容</p>
+    {{ $route.params.id1 ? $route.params.id1 : "未传递参数" }}
+    <div class="nav">
+        <div class="left">
+            <RouterLink to="/grandchild" active-class="ac">孙子路由</RouterLink>
+        </div>
+        <div class="right">
+            <RouterView></RouterView>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { RouterLink, RouterView } from 'vue-router';
+</script>
+```
+
+```vue
+<template>
+    <p>grandchild的内容</p>
+    {{ $route.params.id2 ? $route.params.id2 : "未传递参数" }}
+</template>
+```
+
+```js
+// 导出Vue路由模块
+export const routes = [
+  {
+    path: '/parent',
+    children: [
+      {
+        path: '/child/:id1?',
+        component: () => import('@/components/Child.vue'),
+        children: [
+          {
+            path: '/grandchild/:id2?',
+            component: () => import('@/components/Grandchild.vue'),
+          }
+        ]
+      }
+    ],
+  },
+]
+```
+
+
+
+### 高级题目
+
+#### 题目5：嵌套路由的懒加载与代码分割
+
+**任务描述**：在嵌套路由中，使用懒加载和代码分割优化项目性能。每个路由组件按需加载，减少初始加载时间。
+
+**要求**：
+
+1. 修改路由配置，使用懒加载加载每个路由组件。
+2. 在父路由组件中提供导航链接，点击链接时按需加载对应的子路由组件。
+3. 使用 Vue Router 的 `async` 组件实现懒加载。
+
+**提示**：
+
+- 使用 `() => import()` 语法实现懒加载。
+- 确保每个路由组件按需加载。
+
+```vue
+<template>
+    <div class="nav">
+        <div class="left">
+            <RouterLink to="/child" active-class="ac">子路由</RouterLink>
+        </div>
+        <div class="right">
+            <RouterView></RouterView>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { RouterLink, RouterView } from 'vue-router';
+</script>
+```
+
+```js
+// 导出Vue路由模块
+export const routes = [
+  {
+    path: '/parent',
+    children: [
+      {
+        path: '/child/:id1?',
+        component: async () => import('@/components/Child.vue'),
+        children: [
+          {
+            path: '/grandchild/:id2?',
+            component: async () => import('@/components/Grandchild.vue'),
+          }
+        ]
+      }
+    ],
+  },
+]
+```
+
+
+
+### 综合题目
+
+#### 题目6：嵌套路由的综合应用
+
+**任务描述**：创建一个包含多个层级嵌套路由的项目，模拟一个简单的电商系统。父路由为 `/home`，子路由包括 `/products`（产品列表）、`/cart`（购物车）、`/user`（用户中心）。每个子路由下还可以有更细的路由，例如 `/products/:id`（产品详情页）。
+
+**要求**：
+
+1. 配置多级嵌套路由。
+2. 在父路由组件中提供导航链接，跳转到不同的子路由。
+3. 在子路由组件中实现具体的功能，例如产品列表页显示产品列表，产品详情页显示产品详情。
+4. 使用动态路由匹配和路由参数传递数据。
+
+
+**提示**：
+
+- 使用嵌套路由配置。
+- 使用动态路由匹配。
+
+```vue
+<template>
+    <h1>电商系统</h1>
+    <div class="nav">
+        <div class="left">
+            <RouterLink to="/products" active-class="ac">产品列表</RouterLink>
+            <RouterLink to="/cart" active-class="ac">购物车</RouterLink>
+            <RouterLink to="/user" active-class="ac">用户中心</RouterLink>
+        </div>
+        <div class="right">
+            <RouterView></RouterView>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { RouterLink, RouterView } from 'vue-router';
+</script>
+```
+
+```vue
+<template>
+    {{ $route.params.id ? `商品ID【${$route.params.id}】的产品详情` : "商品列表" }}
+</template>
+```
+
+```vue
+<template>
+    购物车
+</template>
+```
+
+```vue
+<template>
+    用户中心
+</template>
+```
+
+```js
+// 导出Vue路由模块
+export const routes = [
+  {
+    path: '/home',
+    children: [
+      {
+        path: '/products/:id?',
+        component: async () => import('@/components/Products.vue'),
+      },
+      {
+        path: '/cart',
+        component: async () => import('@/components/Cart.vue'),
+      },
+      {
+        path: '/user',
+        component: async () => import('@/components/User.vue'),
+      },
+    ],
+  },
+]
+```
+
-- 
Gitee


From c2f6e63fa9401893389a1e46da2a0695082a322d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=98=BE=E4=B9=89?= <3515252188@qq.com>
Date: Thu, 29 May 2025 19:06:06 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E7=BB=83=E4=B9=A0=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...45\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "\347\216\213\346\230\276\344\271\211/\345\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md" => "\347\216\213\346\230\276\344\271\211/20250529 \345\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md" (100%)

diff --git "a/\347\216\213\346\230\276\344\271\211/\345\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md" "b/\347\216\213\346\230\276\344\271\211/20250529 \345\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md"
similarity index 100%
rename from "\347\216\213\346\230\276\344\271\211/\345\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md"
rename to "\347\216\213\346\230\276\344\271\211/20250529 \345\237\272\347\241\200\347\273\203\344\271\240\351\242\230.md"
-- 
Gitee