# 23全栈开发班练习题-vue

**Repository Path**: myhfw003/grade23-fullstack-practice-vue

## Basic Information

- **Project Name**: 23全栈开发班练习题-vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-04-11
- **Last Updated**: 2025-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 23级全栈开发练习-vue

## 一、vue应用基础

1. 使用H5+vue3（选项式写法），在页面上显示一个响应式内容“你好，世界！”

2. 使用H5+vue3（组合式写法），在页面上显示一个响应式内容“你好，世界！”

3. 使用nodejs项目+vue3（选项式写法），在页面上显示一个响应式内容“你好，世界！”

4. 使用nodejs项目+vue3（组合式写法），在页面上显示一个响应式内容“你好，世界！”

## 二、flex布局（适合之前未专门学习过flex样式的童鞋）

### 基础练习题

1. **创建简单的水平布局**
   - 使用 Flex 布局创建一个包含三个子元素（`div`）的容器，要求子元素水平排列，宽度相等，背景颜色分别为红色、绿色和蓝色。
   - 提示：设置容器的 `display` 属性为 `flex`，并使用 `flex-grow` 属性使子元素宽度相等。
   - 参考效果：

    ![20250418162320-2025-04-18-16-23-22](https://oss.9ihub.com/test/20250418162320-2025-04-18-16-23-22.png)

2. **垂直居中对齐**
   - 创建一个 Flex 容器，高度为 200px，宽度为 300px，背景颜色为灰色。在容器中放置一个子元素（`div`），宽度为 100px，高度为 50px，背景颜色为黄色，要求子元素在容器中垂直居中对齐。
   - 提示：使用 `align-items` 属性实现垂直居中。
   - 参考效果：

    ![20250418162445-2025-04-18-16-24-47](https://oss.9ihub.com/test/20250418162445-2025-04-18-16-24-47.png)

### 进阶练习题

3. **水平和垂直居中对齐**
   - 创建一个 Flex 容器，宽高均为 300px，背景颜色为浅蓝色。在容器中放置一个子元素（`div`），宽高均为 100px，背景颜色为粉色，要求子元素在容器中水平和垂直居中对齐。
   - 提示：结合使用 `justify-content` 和 `align-items` 属性。
   - 参考效果：

    ![20250418162544-2025-04-18-16-25-46](https://oss.9ihub.com/test/20250418162544-2025-04-18-16-25-46.png)

4. **多行布局**
   - 创建一个 Flex 容器，宽度为 400px，高度为 300px，背景颜色为浅黄色。在容器中放置 6 个子元素（`div`），每个子元素宽度为 100px，高度为 50px，背景颜色为浅绿色。要求子元素在容器中水平排列，当一行放不下时自动换行。
   - 提示：使用 `flex-wrap` 属性实现多行布局。
   - 参考效果：
   
   ![20250418162634-2025-04-18-16-26-36](https://oss.9ihub.com/test/20250418162634-2025-04-18-16-26-36.png)

### 拓展练习题

5. **响应式布局**
   - 创建一个 Flex 容器，宽度为 100%，高度为 400px，背景颜色为浅紫色。在容器中放置 4 个子元素（`div`），每个子元素宽度为 200px，高度为 100px，背景颜色为浅粉色。要求子元素在容器中水平排列，当屏幕宽度小于 600px 时，子元素自动换行排列。（完成后在开发模式下改变显示宽度，查看效果）
   - 提示：使用 `flex-wrap` 属性和媒体查询（`@media`）实现响应式布局。
   - 参考效果：

   ![20250418162921-2025-04-18-16-29-23](https://oss.9ihub.com/test/20250418162921-2025-04-18-16-29-23.png)
   

6. **复杂布局**
   - 创建一个 Flex 容器，宽度为 100%，高度为 600px，背景颜色为浅灰色。在容器中放置 5 个子元素（`div`），要求第一个子元素宽度为 200px，高度为 200px，背景颜色为浅蓝色，水平居中对齐；第二个子元素宽度为 300px，高度为 100px，背景颜色为浅绿色，水平居中对齐；第三个子元素宽度为 150px，高度为 150px，背景颜色为浅黄色，水平居中对齐；第四个子元素宽度为 250px，高度为 120px，背景颜色为浅粉色，水平居中对齐；第五个子元素宽度为 180px，高度为 180px，背景颜色为浅紫色，水平居中对齐。要求子元素在容器中垂直排列，且每个子元素之间有 20px 的间距。
   - 提示：使用 `flex-direction` 属性设置垂直排列，使用 `align-items` 属性实现水平居中对齐，使用 `margin` 属性设置间距。
   - 参考效果：
   
   ![20250418163100-2025-04-18-16-31-02](https://oss.9ihub.com/test/20250418163100-2025-04-18-16-31-02.png)
  

7. 使用flex分别实现如下几种布局-骰子布局练习
    - 参考效果：

    ![20231020093152](https://oss.9ihub.com/test/20231020093152.png)

## 三、计算属性

### 基础练习题
1. **全名计算**
   - 创建一个 Vue 3 应用，页面上有两个输入框，分别用于输入用户的姓和名。要求通过计算属性动态生成用户的全名，并显示在页面上。
   - 提示：使用计算属性 `computed`，将姓和名拼接成全名。
   - 参考效果：

   ![screenshots-2025-04-18-17-13-10](https://oss.9ihub.com/test/screenshots-2025-04-18-17-13-10.gif)

  
2. **价格计算**
   - 创建一个 Vue 3 应用，页面上有一个输入框用于输入商品的单价，另一个输入框用于输入商品的数量。要求通过计算属性动态计算总价，并显示在页面上。
   - 提示：使用计算属性 `computed`，将单价和数量相乘得到总价。
   - 参考效果：

   ![screenshots-2025-04-18-17-13-55](https://oss.9ihub.com/test/screenshots-2025-04-18-17-13-55.gif)


### 进阶练习题
3. **过滤数据**
   - 创建一个 Vue 3 应用，页面上有一个输入框用于输入搜索关键词，下方有一个列表显示一些用户数据（例如：用户姓名）。要求通过计算属性动态过滤出包含搜索关键词的用户，并显示在列表中。
   - 提示：使用计算属性 `computed`，根据搜索关键词过滤用户数据。
   - 参考效果：

   ![screenshots-2025-04-18-17-05-26](https://oss.9ihub.com/test/screenshots-2025-04-18-17-05-26.gif)
   

4. **格式化日期**
   - 创建一个 Vue 3 应用，页面上有一个输入框用于输入日期（格式为 `YYYY-MM-DD`），要求通过计算属性将日期格式化为 `YYYY年MM月DD日` 的形式，并显示在页面上。
   - 提示：使用计算属性 `computed`，对日期字符串进行格式化处理。
   - 参考效果：

    ![screenshots-2025-04-18-17-07-23](https://oss.9ihub.com/test/screenshots-2025-04-18-17-07-23.gif)


### 拓展练习题
5. **动态样式**
   - 创建一个 Vue 3 应用，页面上有一个输入框用于输入背景颜色的十六进制值（例如：`#ff0000`），要求通过计算属性动态生成一个带有该背景颜色的 `<div>`，并显示在页面上。
   - 提示：使用计算属性 `computed`，将输入的背景颜色值绑定到 `<div>` 的 `style` 属性中。
   - 参考效果：

    ![screenshots-2025-04-18-17-10-01](https://oss.9ihub.com/test/screenshots-2025-04-18-17-10-01.gif)


6. **综合练习：用户信息表单**
   - 创建一个 Vue 3 应用，页面上有一个表单，包含以下字段：
     - 用户名（输入框）
     - 年龄（输入框）
     - 性别（单选按钮，男/女）
   - 要求通过计算属性动态生成一个用户信息摘要，并显示在页面上。摘要内容包括：
     - 用户名
     - 年龄（格式化为“XX岁”）
     - 性别
   - 提示：使用计算属性 `computed`，将表单数据格式化为摘要信息。
   - 参考效果：
   
   ![screenshots-2025-04-18-17-11-21](https://oss.9ihub.com/test/screenshots-2025-04-18-17-11-21.gif)
   
## 四、v-if v-show

### 基础练习题

#### 题目 1：显示隐藏按钮
**任务：**
创建一个简单的 Vue 3 应用，页面上有一个按钮和一个段落文本。点击按钮时，使用 `v-if` 控制段落文本的显示和隐藏。

**要求：**
- 段落文本初始状态为显示。
- 点击按钮时，段落文本切换显示和隐藏状态。
- 参考效果如下图

![screenshots-2025-04-21-10-19-52](https://oss.9ihub.com/test/screenshots-2025-04-21-10-19-52.gif)



#### 题目 2：显示隐藏切换
**任务：**
创建一个 Vue 3 应用，页面上有两个按钮和一个段落文本。一个按钮用于显示段落文本，另一个按钮用于隐藏段落文本，使用 `v-show` 实现。

**要求：**
- 段落文本初始状态为隐藏。
- 点击“显示”按钮时，段落文本显示。
- 点击“隐藏”按钮时，段落文本隐藏。
- 参考效果如下图

![screenshots-2025-04-21-10-24-18](https://oss.9ihub.com/test/screenshots-2025-04-21-10-24-18.gif)

### 进阶练习题
#### 题目 3：条件渲染列表
**任务：**
创建一个 Vue 3 应用，页面上有一个输入框和一个按钮，以及一个列表。用户在输入框中输入内容，点击按钮后，将输入的内容添加到列表中。使用 `v-if` 判断列表是否为空，如果为空则显示“列表为空”的提示信息，否则显示列表内容。

**要求：**
- 列表初始为空。
- 用户输入内容并点击按钮后，内容添加到列表中。
- 使用 `v-if` 和 `v-else` 判断列表是否为空。
- 参考效果如下图

![screenshots-2025-04-21-10-27-02](https://oss.9ihub.com/test/screenshots-2025-04-21-10-27-02.gif)

#### 题目 4：动态切换组件
**任务：**
创建一个 Vue 3 应用，页面上有两个按钮，分别用于切换显示两个不同的组件。使用 `v-if` 和 `v-else` 实现组件的动态切换。

**要求：**
- 初始时显示组件 A。
- 点击“显示组件 A”按钮时，显示组件 A。
- 点击“显示组件 B”按钮时，显示组件 B。
- 参考效果如下图

![screenshots-2025-04-21-10-28-15](https://oss.9ihub.com/test/screenshots-2025-04-21-10-28-15.gif)

### 拓展练习题
#### 题目 5：性能对比实验
**任务：**
创建一个 Vue 3 应用，页面上有两个按钮和一个包含大量元素的列表。使用 `v-if` 和 `v-show` 分别控制列表的显示和隐藏，对比两者的性能差异。

**要求：**
- 列表初始状态为显示。
- 点击“使用 v-if 隐藏”按钮时，使用 `v-if` 隐藏列表。
- 点击“使用 v-show 隐藏”按钮时，使用 `v-show` 隐藏列表。
- 使用浏览器开发者工具的性能面板，观察两种方式的性能差异。
- 参考效果如下图

![screenshots-2025-04-21-10-29-51](https://oss.9ihub.com/test/screenshots-2025-04-21-10-29-51.gif)

## 五、v-for

### 基础练习题

#### 题目 1：渲染列表
**任务：**
创建一个 Vue 3 应用，页面上有一个数组，使用 `v-for` 将数组中的每个元素渲染到一个列表中。

**要求：**
- 数组初始值为 `['苹果', '香蕉', '橙子']`。
- 使用 `v-for` 遍历数组，并将每个元素渲染到一个 `<li>` 标签中。
- 参考效果如下图。

![screenshots-2025-04-21-10-34-15](https://oss.9ihub.com/test/screenshots-2025-04-21-10-34-15.gif)

#### 题目 2：渲染对象列表
**任务：**
创建一个 Vue 3 应用，页面上有一个对象数组，每个对象包含 `name` 和 `age` 属性。使用 `v-for` 将对象数组中的每个对象渲染到一个列表中，显示每个对象的 `name` 和 `age`。

**要求：**
- 对象数组初始值为 `[ { name: '张三', age: 20 }, { name: '李四', age: 22 } ]`。
- 使用 `v-for` 遍历对象数组，并将每个对象的 `name` 和 `age` 渲染到一个 `<li>` 标签中。
- 参考效果如下图。

![screenshots-2025-04-21-10-35-04](https://oss.9ihub.com/test/screenshots-2025-04-21-10-35-04.gif)

### 进阶练习题
#### 题目 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)

#### 题目 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)

### 拓展练习题
#### 题目 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)

#### 题目 6：动态排序列表
**任务：**
创建一个 Vue 3 应用，页面上有一个对象数组，每个对象包含 `name` 和 `age` 属性。使用 `v-for` 渲染列表，并提供两个按钮，分别用于按 `name` 和 `age` 排序。

**要求：**
- 对象数组初始值为 `[ { name: '张三', age: 20 }, { name: '李四', age: 22 }, { name: '王五', age: 18 } ]`。
- 使用 `v-for` 渲染列表。
- 提供两个按钮，分别用于按 `name` 和 `age` 排序。
- 参考效果如下图。

![screenshots-2025-04-21-10-38-45](https://oss.9ihub.com/test/screenshots-2025-04-21-10-38-45.gif)


## 六、class与style绑定

### 基础练习题
1. **动态绑定单个类名**
    - 要求：创建一个 Vue 3 应用，页面上有一个按钮，点击按钮后，按钮的类名在“btn”和“btn-active”之间切换。使用 `v-bind:class` 或简写 `:class` 来实现。
    - 提示：可以使用一个数据属性来控制按钮的类名，点击按钮时切换该属性的值。
2. **绑定对象形式的类**
    - 要求：在页面上有一个段落元素 `<p>`，使用对象形式的 `:class` 绑定，使其同时具有“text-center”（居中对齐文本）和“text-red”（文本颜色为红色）这两个类，当点击段落时，切换“text-red”类的绑定状态，即点击一次后文本颜色变为非红色，再次点击恢复为红色。
    - 提示：在 Vue 的 `data` 中定义一个对象，对象的键为类名，值为布尔值，用于控制类的绑定状态。
3. **数组形式的类绑定**
    - 要求：页面上有一个列表，包含三个列表项 `<li>`。使用数组形式的 `:class` 绑定，为每个列表项动态添加一个类名“list-item”，并且当鼠标悬停在某个列表项上时，为其添加“hovered”类，离开时移除该类。
    - 提示：数组中可以包含字符串（静态类名）和对象（动态类名），利用 Vue 的事件绑定来控制动态类名的添加和移除。

### 中等练习题
4. **综合类名绑定**
    - 要求：创建一个表单输入框 `<input>`，当输入框获得焦点时，为其添加“focused”类，失去焦点时移除该类。同时，根据输入框的值是否为空，动态绑定“valid”（值不为空时）或“invalid”（值为空时）类。使用对象形式的 `:class` 绑定来实现。
    - 提示：结合 Vue 的事件监听（`@focus`、`@blur`）和数据绑定来控制类名的动态变化。
5. **样式绑定基础**
    - 要求：页面上有一个 `<div>` 元素，使用 `:style` 绑定为其设置背景颜色为“#f0f0f0”，字体大小为“16px”，字体颜色为“#333”。然后添加一个按钮，点击按钮后，将背景颜色改为“#ff0000”，字体大小改为“20px”，字体颜色改为“#fff”。
    - 提示：可以使用对象形式的 `:style` 绑定，定义一个样式对象，在点击按钮时修改该对象的属性值。
6. **数组形式的样式绑定**
    - 要求：页面上有一个图片元素 `<img>`，使用数组形式的 `:style` 绑定为其设置宽度为“200px”，高度为“200px”。然后添加两个按钮，一个按钮点击后将图片的宽度和高度都扩大到“300px”，另一个按钮点击后将图片的宽度和高度恢复到“200px”。
    - 提示：数组中可以包含多个样式对象，通过修改数组中的对象来实现样式的动态变化。

### 进阶练习题
7. **复杂类名和样式绑定**
    - 要求：创建一个卡片组件，包含一个标题、一段描述文本和一个按钮。使用 `:class` 绑定为卡片设置不同的主题样式，主题有“default”（默认主题）、“primary”（主要主题）和“danger”（危险主题）。每个主题对应不同的背景颜色、字体颜色和按钮样式。同时，使用 `:style` 绑定为描述文本设置动态的行高，行高值由用户在页面上的一个输入框中输入。
    - 提示：在 Vue 的 `data` 中定义一个变量来控制主题，根据该变量的值动态绑定类名。对于样式绑定，可以将行高值绑定到一个样式对象的 `lineHeight` 属性上。
8. **响应式类名和样式绑定**
    - 要求：创建一个页面，页面上有一个导航栏，当页面宽度小于 600px 时，导航栏的类名为“nav-mobile”，背景颜色为“#fff”，字体颜色为“#000”；当页面宽度大于等于 600px 时，导航栏的类名为“nav-desktop”，背景颜色为“#333”，字体颜色为“#fff”。使用 Vue 的 `:class` 和 `:style` 绑定以及浏览器的 `window.innerWidth` 属性来实现响应式效果。
    - 提示：可以使用 Vue 的生命周期钩子（如 `mounted`）来监听窗口大小的变化，并根据窗口宽度动态更新类名和样式。
9. **结合条件渲染和类名、样式绑定**
    - 要求：页面上有一个商品列表，每个商品项包含图片、名称、价格和购买按钮。使用 `v-if` 或 `v-show` 来根据商品是否有库存显示购买按钮。同时，使用 `:class` 绑定为有库存的商品项添加“in-stock”类，为无库存的商品项添加“out-of-stock”类。此外，使用 `:style` 绑定为有库存的商品项的购买按钮设置背景颜色为“#00ff00”，为无库存的购买按钮设置背景颜色为“#ff0000”。
    - 提示：在 Vue 的 `data` 中定义商品数据，包含库存状态等信息。根据库存状态动态控制按钮的显示和类名、样式的绑定。

## 七、事件处理

### 基础题
1. **按钮点击事件**
   - **题目描述**：创建一个简单的 Vue 3 应用，页面上有一个按钮，当点击按钮时，页面上显示“按钮被点击了”。

2. **输入框输入事件**
   - **题目描述**：创建一个 Vue 3 应用，页面上有一个输入框，当用户在输入框中输入内容时，页面上实时显示输入的内容。

### 中等题
3. **表单提交事件**
   - **题目描述**：创建一个 Vue 3 应用，页面有一个上表单，表单中有用户名和密码输入框，当点击提交按钮时，验证用户名和密码是否为空，如果为空，则在页面上显示相应的提示信息。
  
4. **鼠标事件**
   - **题目描述**：创建一个 Vue 3 应用，页面上有一个按钮，当鼠标移入按钮时，按钮的背景颜色变为红色，当鼠标移出按钮时，按钮的背景颜色恢复为默认颜色。

### 拓展题
5. **事件修饰符和键盘事件**
   - **题目描述**：创建一个 Vue 3 应用，页面上有一个输入框，当用户按下回车键时，页面上显示输入的内容，并清空输入框。


## 八、表单绑定

### 基础题
1. **单行文本输入框绑定**
   - **题目描述**：创建一个 Vue 3 应用，页面上有一个输入框和一个按钮，当用户在输入框中输入内容并点击按钮时，页面上显示输入的内容。

2. **多行文本输入框绑定**
   - **题目描述**：创建一个 Vue 3 应用，页面上有一个多行文本输入框和一个按钮，当用户在多行文本输入框中输入内容并点击按钮时，页面上显示输入的内容。

3. **单选输入框绑定**
   - **题目描述**：创建一个 Vue 3 应用，页面上有2个单选输入框和一个按钮，当用户在单选框中选择内容并点击按钮时，页面上显示选择的内容。

4. **复选文本输入框绑定**
   - **题目描述**：创建一个 Vue 3 应用，页面上有5个复选输入框和一个按钮，当用户在复选框中选择内容并点击按钮时，页面上显示选择的内容。

5. **下拉列表绑定**
   - **题目描述**：创建一个 Vue 3 应用，页面上有一个下拉列表和一个按钮，当用户在下拉列表中选择内容并点击按钮时，页面上显示选择的内容。

### 中等题
6. **表单验证（必填项）**
   - **题目描述**：创建一个 Vue 3 应用，页面上有一个表单，包含用户名和密码输入框，当用户点击提交按钮时，验证用户名和密码是否为空，如果为空，则在页面上显示相应的提示信息。

7. **表单验证（密码强度）**
   - **题目描述**：创建一个 Vue 3 应用，页面上有一个表单，包含用户名和密码输入框，当用户输入密码时，实时验证密码强度（至少包含一个大写字母、一个小写字母和一个数字），并在页面上显示密码强度提示信息。

### 拓展题
8. **表单绑定与动态表单**
   - **题目描述**：创建一个 Vue 3 应用，页面上有一个表单，包含多个动态生成的输入框（例如，用户可以点击“添加输入框”按钮来动态添加输入框），当用户提交表单时，将所有输入框的内容收集并显示到页面上。

9. **表单绑定与表单重置**
   - **题目描述**：创建一个 Vue 3 应用，页面上有一个表单，包含用户名、密码和确认密码输入框，当用户点击提交按钮时，验证用户名和密码是否为空，密码和确认密码是否一致，如果验证通过，则显示提交成功的信息，并提供一个“重置表单”按钮，点击该按钮时将表单恢复到初始状态。

## 九、侦听器

### 基础练习
1. **监听简单数据变化**：
    - 要求：创建一个简单的 Vue3 应用，页面上有一个按钮和一个显示数字的文本。点击按钮使数字加1，使用侦听器监听该数字的变化，当数字变化时在控制台打印新值和旧值。
    - 参考效果如下：

   ![screenshots-2025-04-27-10-19-35](https://oss.9ihub.com/test/screenshots-2025-04-27-10-19-35.gif)

2. **监听对象属性变化**：
    - 要求：创建一个包含姓名和年龄的对象，通过输入框分别修改姓名和年龄，使用侦听器分别监听姓名和年龄的变化，并在控制台打印变化信息。
    - 参考效果如下：

    ![screenshots-2025-04-27-10-21-20](https://oss.9ihub.com/test/screenshots-2025-04-27-10-21-20.gif)
    

### 进阶练习
1. **深度监听对象变化**：
    - 要求：创建一个包含多个属性的对象，如商品信息对象，包含价格、数量等属性。通过输入框修改这些属性的值，使用侦听器深度监听该对象的变化，当对象内部属性发生变化时在控制台打印变化信息。
    - 参考效果如下：
    
   ![screenshots-2025-04-27-10-23-04](https://oss.9ihub.com/test/screenshots-2025-04-27-10-23-04.gif)

2. **使用 immediate 选项**：
    - 要求：创建一个计数器应用，页面上有一个按钮和一个显示计数器数值的文本。点击按钮使计数器加1，使用侦听器监听计数器数值的变化，并在控制台打印新值和旧值。同时，要求在组件创建时立即执行一次侦听器的回调函数，打印初始值。
    - 参考效果如下：
   
   ![screenshots-2025-04-27-10-24-30](https://oss.9ihub.com/test/screenshots-2025-04-27-10-24-30.gif)

### 综合练习
1. **监听数组变化并更新视图**：
    - 要求：创建一个包含多个任务的数组，每个任务包含任务名称和是否完成的布尔值。页面上显示任务列表，每个任务旁边有复选框用于标记任务是否完成。使用侦听器监听任务数组的变化，当任务的完成状态发生变化时，更新页面上任务的显示样式（如已完成的任务显示为灰色）。
    - 参考效果如下：
   
   ![screenshots-2025-04-27-10-26-15](https://oss.9ihub.com/test/screenshots-2025-04-27-10-26-15.gif)

## 十、模板引用

略

## 十一、组件基础

### 基础练习

#### 1. 定义和使用简单组件
- **要求**：创建一个简单的组件 `HelloWorld`，该组件显示一个欢迎信息（如“Hello, Vue3!”）。在父组件中引入并使用该组件。
- **参考效果如下**：

![screenshots-2025-04-27-10-35-04](https://oss.9ihub.com/test/screenshots-2025-04-27-10-35-04.gif)

#### 2. 传递属性（Props）
- **要求**：扩展 `HelloWorld` 组件，使其能够通过 `props` 接收一个名字，并显示欢迎信息（如“Hello, [名字]!”）。在父组件中传递不同的名字。
- **参考效果如下**：

![screenshots-2025-04-27-10-38-07](https://oss.9ihub.com/test/screenshots-2025-04-27-10-38-07.gif)

### 进阶练习

#### 3. 自定义事件
- **要求**：创建一个 `ButtonCounter` 组件，该组件包含一个按钮和一个计数器。每次点击按钮时，计数器加1，并通过自定义事件将当前计数值传递给父组件。
- **参考效果如下**：

![screenshots-2025-04-27-10-40-26](https://oss.9ihub.com/test/screenshots-2025-04-27-10-40-26.gif)

#### 4. 使用插槽（Slots）
- **要求**：创建一个 `Card` 组件，该组件包含一个标题和一个内容区域。通过插槽允许父组件自定义标题和内容。
- **参考效果如下**：
 
![screenshots-2025-04-27-10-44-22](https://oss.9ihub.com/test/screenshots-2025-04-27-10-44-22.gif)

### 综合练习

#### 5. 组件组合与数据传递
- **要求**：创建一个 `UserProfile` 组件，该组件包含用户的基本信息（如用户名、邮箱）和一个按钮。点击按钮时，通过自定义事件将用户信息传递给父组件。父组件接收用户信息并显示在页面上。
- **参考效果如下**：

![screenshots-2025-04-27-10-48-35](https://oss.9ihub.com/test/screenshots-2025-04-27-10-48-35.gif)

 

#### 6. 动态组件与条件渲染
- **要求**：创建一个 `Tab` 组件，允许用户切换不同的标签页。每个标签页显示不同的内容。通过动态组件和条件渲染实现标签页的切换。
- **参考效果如下**：

![screenshots-2025-04-27-10-58-21](https://oss.9ihub.com/test/screenshots-2025-04-27-10-58-21.gif)

## 十二、路由

### 基础练习题
1. **创建基本路由**
   - 使用 Vue 3 和 Vue Router 创建一个简单的单页面应用，包含两个页面：`Home` 和 `About`。
   - 要求：
     - 使用 `vue-router` 的最新版本。
     - 在 `Home` 页面显示“欢迎来到首页！”的文本。
     - 在 `About` 页面显示“这是关于页面！”的文本。
     - 使用 `<router-link>` 实现页面之间的导航。
   - 提示：参考 Vue Router 的基本安装和配置方法。

2. **动态路由匹配**
   - 在上述基础上，添加一个动态路由 `/user/:id`，用于显示用户信息。
   - 要求：
     - 创建一个名为 `User` 的组件。
     - 在 `User` 组件中，通过 `$route.params.id` 获取动态参数，并在页面上显示“用户ID为：[id]”。
     - 在 `Home` 页面添加一个按钮，点击后跳转到 `/user/123`。
   - 提示：动态路由的定义格式为 `path: '/user/:id'`。

3. **嵌套路由**
   - 在 `About` 页面中添加两个子页面：`About/Team` 和 `About/History`。
   - 要求：
     - 在 `About` 组件中使用 `<router-view>` 渲染子页面。
     - 在 `About/Team` 页面显示“这是团队页面！”。
     - 在 `About/History` 页面显示“这是历史页面！”。
     - 在 `About` 页面添加两个链接，分别跳转到 `About/Team` 和 `About/History`。
   - 提示：嵌套路由的配置需要在父路由的 `children` 属性中定义子路由。

### 中级练习题

4. **路由守卫（全局守卫）**
   - 在项目中添加全局路由守卫，实现以下功能：
     - 当用户访问 `/about` 页面时，弹出一个确认框，询问用户是否继续。
     - 如果用户点击“确定”，则允许访问；如果点击“取消”，则取消导航。
   - 要求：
     - 使用 `router.beforeEach` 全局前置守卫。
     - 在确认框中显示“确定要访问关于页面吗？”。
   - 提示：全局前置守卫的回调函数参数为 `(to, from, next)`，其中 `next` 用于控制导航是否继续。

5. **路由守卫（组件内守卫）**
   - 在 `User` 组件中添加组件内路由守卫，实现以下功能：
     - 当用户离开 `User` 页面时，弹出一个提示框，显示“您正在离开用户页面！”。
   - 要求：
     - 使用组件内的 `beforeRouteLeave` 守卫。
     - 在提示框中显示指定内容。
   - 提示：组件内守卫可以直接在组件的 `beforeRouteLeave` 钩子中实现。

6. **路由元信息（Meta Fields）**
   - 在路由配置中为 `Home` 和 `About` 页面添加元信息，分别设置标题为“首页”和“关于”。
   - 要求：
     - 在路由定义中使用 `meta` 属性，例如：
       ```javascript
       {
         path: '/home',
         component: Home,
         meta: { title: '首页' }
       }
       ```
     - 在全局导航守卫中，根据当前路由的 `meta.title` 动态设置页面标题。
   - 提示：可以通过 `document.title` 设置页面标题。

### 高级练习题

7. **路由懒加载**
   - 对项目中的路由组件进行懒加载优化，以减少初始加载时间。
   - 要求：
     - 使用 ES6 的动态导入语法（`import()`）对 `Home`、`About` 和 `User` 组件进行懒加载。
     - 确保懒加载的组件在首次访问时才加载。
   - 提示：懒加载的路由配置示例：
     ```javascript
     {
       path: '/home',
       component: () => import('./views/Home.vue')
     }
     ```

8. **自定义路由滚动行为**
   - 在项目中实现自定义路由滚动行为，当用户在不同页面之间切换时，页面滚动到顶部。
   - 要求：
     - 使用 Vue Router 提供的 `scrollBehavior` 配置。
     - 当用户从一个页面跳转到另一个页面时，页面自动滚动到顶部。
   - 提示：`scrollBehavior` 的配置示例：
     ```javascript
     const router = createRouter({
       history: createWebHistory(),
       routes: [...],
       scrollBehavior(to, from, savedPosition) {
         return { top: 0 };
       }
     });
     ```

9. **多视图路由**
   - 在项目中实现多视图路由，创建一个布局页面 `Layout`，并在其中包含两个视图：
     - 一个用于显示主内容（`Home` 和 `About` 页面）。
     - 一个用于显示侧边栏（`Sidebar` 组件）。
   - 要求：
     - 在 `Layout` 组件中使用两个 `<router-view>`，分别绑定到不同的命名视图。
     - 在路由配置中，为 `Home` 和 `About` 页面指定主内容视图，为 `Sidebar` 组件指定侧边栏视图。
   - 提示：命名视图的配置示例：
     ```javascript
     {
       path: '/home',
       components: {
         default: Home,
         sidebar: Sidebar
       }
     }
     ```

## 十三、嵌套路由

### 基础题目

#### 题目1：实现简单的嵌套路由
**任务描述**：创建一个 Vue 3 项目，包含一个父路由和两个子路由。父路由的路径为 `/parent`，子路由分别为 `/child1` 和 `/child2`。父路由组件中显示一个导航栏，点击导航栏的链接可以切换到对应的子路由组件。

**要求**：
1. 使用 Vue Router 4 配置嵌套路由。
2. 父路由组件中显示一个导航栏，导航栏包含两个链接，分别指向 `/parent/child1` 和 `/parent/child2`。
3. 子路由组件中分别显示不同的内容。

**提示**：
- 在路由配置中定义嵌套路由。
- 使用 `<router-link>` 实现导航链接。
- 使用 `<router-view>` 显示子路由组件。

#### 题目2：动态嵌套路由
**任务描述**：在上一题的基础上，将子路由的路径改为动态路径，例如 `/parent/:id`，并通过路由参数传递数据。

**要求**：
1. 修改路由配置，将子路由路径改为动态路径。
2. 在父路由组件中添加一个输入框，用户输入的值作为子路由的参数。
3. 在子路由组件中显示传递的参数。

**提示**：
- 使用动态路由匹配。
- 在子路由组件中通过 `this.$route.params` 获取参数。

### 中等难度题目

#### 题目3：嵌套路由的多级嵌套
**任务描述**：创建一个包含三级嵌套路由的项目。父路由路径为 `/parent`，子路由路径为 `/child`，孙子路由路径为 `/grandchild`。每个层级的组件都显示不同的内容，并提供导航链接。

**要求**：
1. 配置三级嵌套路由。
2. 在父路由组件中提供导航到子路由的链接。
3. 在子路由组件中提供导航到孙子路由的链接。
4. 在孙子路由组件中显示内容。

**提示**：
- 使用多级嵌套路由配置。
- 在每个层级的组件中使用 `<router-view>` 显示子组件。

#### 题目4：嵌套路由的参数传递与默认值
**任务描述**：在嵌套路由中，子路由和孙子路由都需要接收参数。如果参数未传递，则显示默认值。

**要求**：
1. 修改上一题的路由配置，为子路由和孙子路由添加动态参数。
2. 在子路由和孙子路由组件中，如果参数未传递，则显示默认值。
3. 在父路由组件中提供导航链接，用户可以选择是否传递参数。

**提示**：
- 使用动态路由匹配。
- 在组件中通过 `this.$route.params` 获取参数，并设置默认值。

### 高级题目

#### 题目5：嵌套路由的懒加载与代码分割
**任务描述**：在嵌套路由中，使用懒加载和代码分割优化项目性能。每个路由组件按需加载，减少初始加载时间。

**要求**：
1. 修改路由配置，使用懒加载加载每个路由组件。
2. 在父路由组件中提供导航链接，点击链接时按需加载对应的子路由组件。
3. 使用 Vue Router 的 `async` 组件实现懒加载。

**提示**：
- 使用 `() => import()` 语法实现懒加载。
- 确保每个路由组件按需加载。

### 综合题目

#### 题目6：嵌套路由的综合应用
**任务描述**：创建一个包含多个层级嵌套路由的项目，模拟一个简单的电商系统。父路由为 `/home`，子路由包括 `/products`（产品列表）、`/cart`（购物车）、`/user`（用户中心）。每个子路由下还可以有更细的路由，例如 `/products/:id`（产品详情页）。

**要求**：
1. 配置多级嵌套路由。
2. 在父路由组件中提供导航链接，跳转到不同的子路由。
3. 在子路由组件中实现具体的功能，例如产品列表页显示产品列表，产品详情页显示产品详情。
4. 使用动态路由匹配和路由参数传递数据。


**提示**：
- 使用嵌套路由配置。
- 使用动态路由匹配。