当前位置：首页 > news >正文

Vue百日学习计划Day24-28天详细计划-Gemini版

news 来源：原创 2025/5/19 7:37:16

总目标: 在 Day 24-27 熟练掌握 Vue.js 的各种模板语法，包括文本插值、属性绑定、条件渲染、列表渲染、事件处理和表单绑定，并能结合使用修饰符。

所需资源:
- Vue 3 官方文档 (模板语法): https://cn.vuejs.org/guide/essentials/template-syntax.html
- Vue 3 官方文档 (条件渲染): https://cn.vuejs.org/guide/essentials/conditional.html
- Vue 3 官方文档 (列表渲染): https://cn.vuejs.org/guide/essentials/list.html
- Vue 3 官方文档 (事件处理): https://cn.vuejs.org/guide/essentials/event-handling.html
- Vue 3 官方文档 (表单输入绑定): https://cn.vuejs.org/guide/essentials/forms.html
- Day 21-23 创建并运行成功的 Vue 3 项目（作为实践环境）。

Day 24: 基础模板语法 - 插值与绑定 (~3 小时)

本日目标: 学习如何在模板中显示数据（文本、HTML）以及如何将数据绑定到 HTML 元素的属性上。
学习计划:
- 番茄时钟 1 (25 分钟工作 + 5 分钟休息):
  - 内容: 文本插值 ({{ }}) 与 JavaScript 表达式。
  - 活动: 阅读官方文档“模板语法”部分关于文本插值的内容。在你的 Vue 项目中，修改 App.vue 或创建一个新组件，尝试使用 {{ }} 显示组件中的数据 (<script setup> 中的变量)。尝试在插值中使用简单的 JavaScript 表达式（如计算、三元运算符）。
  - 实践: 在 <script setup> 中定义一个变量 message，在 <template> 中显示 {{ message }}。定义 count 和 price，显示 {{ count * price }}。
  - 休息: 短暂休息。
- 番茄时钟 2 (25 分钟工作 + 5 分钟休息):
  - 内容: 原始 HTML (v-html)。
  - 活动: 阅读官方文档“模板语法”部分关于 v-html 的内容。理解它的作用是将包含 HTML 标签的字符串作为真实的 HTML 插入。重点理解并记住安全风险！
  - 实践: 在 <script setup> 中定义一个包含 HTML 标签的字符串 rawHtml = '<span>有 **加粗** 文字</span>'，使用 v-html="rawHtml" 显示它。
  - 休息: 短暂休息。
- 番茄时钟 3 (25 分钟工作 + 5 分钟休息):
  - 内容: Attribute 绑定 (v-bind 或 :) - 基础。
  - 活动: 阅读官方文档“模板语法”部分关于属性绑定的内容。理解 v-bind 用于动态设置 HTML 属性的值。学习其缩写 :。
  - 实践: 绑定 img 标签的 src 属性到一个变量。绑定 a 标签的 href 属性。绑定 button 的 disabled 属性到一个布尔值变量。
  - 休息: 短暂休息。
- 番茄时钟 4 (25 分钟工作 + 5 分钟休息):
  - 内容: Attribute 绑定 (v-bind 或 :) - Class 与 Style 绑定。
  - 活动: 阅读官方文档中关于 Class 与 Style 绑定的详细内容。理解如何通过对象和数组的方式动态绑定元素的 class 和 style。
  - 实践: 根据条件绑定不同的 CSS class。动态绑定元素的颜色或字体大小 style。
  - 休息: 短暂休息。
- 总结与回顾 (10-15 分钟):
  - 回顾今天学习的四种基本模板显示/绑定方式。
  - 确保理解 {{ }}, v-html, v-bind (:) 的用法和区别。
  - 检查实践代码是否按预期工作。

Day 25: 条件渲染 (v-if, v-show) (~3 小时)

本日目标: 学习如何根据数据的真假来决定元素的显示或隐藏。
所需资源: Vue 3 官方文档 (条件渲染): https://cn.vuejs.org/guide/essentials/conditional.html
学习计划:
- 番茄时钟 1 (25 分钟工作 + 5 分钟休息):
  - 内容: v-if, v-else。
  - 活动: 阅读官方文档“条件渲染”部分关于 v-if 和 v-else 的内容。理解它们是基于条件“销毁/重建”DOM 元素。
  - 实践: 定义一个布尔值变量 isLoggedIn，使用 v-if 显示“欢迎回来”，使用 v-else 显示“请登录”。
  - 休息: 短暂休息。
- 番茄时钟 2 (25 分钟工作 + 5 分钟休息):
  - 内容: v-else-if。
  - 活动: 阅读官方文档关于 v-else-if 的内容。学习如何在多个条件之间进行选择性渲染。
  - 实践: 定义一个变量 userRole (如 ‘admin’, ‘editor’, ‘viewer’)，使用 v-if, v-else-if, v-else 根据角色显示不同的内容或按钮。
  - 休息: 短暂休息。
- 番茄时钟 3 (25 分钟工作 + 5 分钟休息):
  - 内容: v-show。
  - 活动: 阅读官方文档关于 v-show 的内容。理解 v-show 是通过 CSS 的 display 属性来控制元素的显示/隐藏，元素始终存在于 DOM 中。
  - 实践: 定义一个布尔值变量 isLoading，使用 v-show="isLoading" 显示一个加载中的指示器。
  - 休息: 短暂休息。
- 番茄时钟 4 (25 分钟工作 + 5 分钟休息):
  - 内容: v-if vs v-show。
  - 活动: 对比阅读官方文档中 v-if 和 v-show 的区别和使用场景建议。理解性能差异（v-if 开销大，但切换成本低；v-show 初始开销低，但切换成本高）。
  - 思考: 在哪些情况下应该优先使用 v-if？哪些情况下优先使用 v-show？
  - 休息: 短暂休息。
- 总结与回顾 (10-15 分钟):
  - 回顾 v-if, v-else-if, v-else, v-show 的用法。
  - 巩固 v-if 和 v-show 的核心区别。
  - 尝试将今天学到的条件渲染应用到昨天创建的实践代码中。

Day 26: 列表渲染 (v-for) (~3 小时)

本日目标: 学习如何使用 v-for 指令基于数组或对象列表渲染多个元素。
所需资源: Vue 3 官方文档 (列表渲染): https://cn.vuejs.org/guide/essentials/list.html
学习计划:
- 番茄时钟 1 (25 分钟工作 + 5 分钟休息):
  - 内容: v-for 渲染数组 (基础)。
  - 活动: 阅读官方文档“列表渲染”部分关于 v-for 渲染数组的内容。学习基本语法 item in items。
  - 实践: 在 <script setup> 中定义一个字符串数组 items = ['Apple', 'Banana', 'Orange']。在 <template> 中使用 v-for="item in items" 渲染一个 <li> 列表显示这些水果名称。
  - 休息: 短暂休息。
- 番茄时钟 2 (25 分钟工作 + 5 分钟休息):
  - 内容: v-for 渲染数组 (带索引)。
  - 活动: 学习 v-for 带索引的语法 (item, index) in items。理解 index 的作用。
  - 实践: 修改上一步的列表，显示每个水果的索引，例如 {{ index }}. {{ item }}。
  - 休息: 短暂休息。
- 番茄时钟 3 (25 分钟工作 + 5 分钟休息):
  - 内容: v-for 渲染对象、整数范围、<template>。
  - 活动: 阅读官方文档中关于 v-for 渲染对象 (value, key, index)、整数范围 (n in 10) 以及在 <template> 标签上使用 v-for 的内容。
  - 实践: 渲染一个对象的属性列表。渲染一个从 1 到 5 的数字列表。在 <template> 标签上使用 v-for 结合 v-if 实现复杂列表结构的渲染。
  - 休息: 短暂休息。
- 番茄时钟 4 (25 分钟工作 + 5 分钟休息):
  - 内容: key 的重要性。
  - 活动: 阅读官方文档中关于 key 属性的重要性和作用。理解 key 用于给 Vue 一个提示，以跟踪每个节点的身份，从而高效地更新虚拟 DOM。理解为什么不推荐使用索引作为 key (除非数据永不改变)。
  - 实践: 在之前的 v-for 循环中添加 :key="item.id" (如果你的数据有唯一 ID) 或 :key="index" (如果暂时没有唯一 ID，但理解其局限性)。尝试移除 :key 或使用不合适的 key，观察列表更新时的潜在问题 (虽然简单示例可能不明显)。
  - 休息: 短暂休息。
- 总结与回顾 (10-15 分钟):
  - 回顾 v-for 的各种用法和语法。
  - 重点巩固 key 的作用和正确使用方式。
  - 尝试结合 v-if 和 v-for 在列表中根据条件显示/隐藏某些项。

Day 27: 事件处理 (v-on) 与表单绑定 (v-model) + 修饰符 (~3 小时)

本日目标: 学习如何响应用户交互（事件）以及如何实现表单输入和应用状态之间的双向绑定。掌握常用修饰符。
所需资源:
- Vue 3 官方文档 (事件处理): https://cn.vuejs.org/guide/essentials/event-handling.html
- Vue 3 官方文档 (表单输入绑定): https://cn.vuejs.org/guide/essentials/forms.html
学习计划:
- 番茄时钟 1 (25 分钟工作 + 5 分钟休息):
  - 内容: 事件处理 (v-on 或 @) - 基础。
  - 活动: 阅读官方文档“事件处理”部分。学习 v-on 指令及其缩写 @ 的用法。理解如何绑定事件到组件方法。
  - 实践: 在 <script setup> 中定义一个方法 handleClick = () => { alert('按钮被点击了!'); }。在 <template> 中使用 @click="handleClick" 绑定到一个按钮。
  - 休息: 短暂休息。
- 番茄时钟 2 (25 分钟工作 + 5 分钟休息):
  - 内容: 事件处理 - 参数与事件对象，修饰符 (.prevent, .stop)。
  - 活动: 阅读官方文档关于事件处理中传递参数和访问原生事件对象 ($event) 的内容。学习 .prevent (阻止默认事件) 和 .stop (阻止事件冒泡) 修饰符。
  - 实践: 尝试在事件处理方法中接收并打印事件对象 $event。创建一个链接，使用 @click.prevent 阻止页面跳转。创建一个嵌套元素，使用 @click.stop 阻止内部元素的点击事件冒泡到外部元素。
  - 休息: 短暂休息。
- 番茄时钟 3 (25 分钟工作 + 5 分钟休息):
  - 内容: 表单输入绑定 (v-model) - 文本输入。
  - 活动: 阅读官方文档“表单输入绑定”部分。理解 v-model 用于在表单输入元素和应用状态之间创建双向绑定。从文本输入 <input type="text"> 和 <textarea> 开始学习。
  - 实践: 在 <script setup> 中定义一个响应式变量 inputText = ref('')。使用 v-model="inputText" 绑定到一个 <input type="text">。在 <template> 中显示 {{ inputText }}，观察输入框内容和显示内容同步变化。对 <textarea> 进行相同的实践。
  - 休息: 短暂休息。
- 番茄时钟 4 (25 分钟工作 + 5 分钟休息):
  - 内容: 表单输入绑定 (v-model) - 复选框、单选按钮、选择框。
  - 活动: 阅读官方文档关于 v-model 在 <input type="checkbox">, <input type="radio">, <select> 上的用法。理解它们如何绑定到布尔值、数组或单个值。
  - 实践: 绑定一个复选框到布尔值。绑定多个复选框到一个数组。绑定单选按钮到一个值。绑定选择框（单选和多选）到一个值或数组。
  - 休息: 短暂休息。
- 番茄时钟 5 (25 分钟工作 + 5 分钟休息):
  - 内容: v-model 修饰符 (.lazy, .number, .trim)。
  - 活动: 阅读官方文档关于 v-model 修饰符的内容。理解 .lazy (将 input 事件改为 change 事件)、.number (自动将输入转为数字) 和 .trim (自动去除首尾空白字符) 的作用。
  - 实践: 对文本输入使用 .lazy，观察同步时机。对数字输入使用 .number，检查绑定变量的类型。对文本输入使用 .trim，输入带空格的文本，观察显示结果。
  - 休息: 短短休息。
- 总结与实践 (10-15 分钟):
  - 回顾事件处理和表单绑定的核心概念和常用指令。
  - 总结学习过的各种修饰符及其作用。
  - 实践: 尝试构建一个小表单，包含不同类型的输入框，并使用 v-model 绑定数据，使用 @submit.prevent 阻止表单默认提交，并在提交时（点击按钮）打印绑定的数据。结合条件渲染和列表渲染，例如，根据复选框的状态显示/隐藏某些内容，或者根据输入框过滤一个列表。

掌握检查:

在 Day 27 结束时，你应该能够：
- 在模板中正确使用 {{ }} 和 v-html 显示数据。
- 使用 v-bind (:) 动态绑定元素的属性、class 和 style。
- 使用 v-if, v-else-if, v-else 和 v-show 控制元素的显示/隐藏。
- 使用 v-for 渲染数组或对象列表，并理解 key 的作用。
- 使用 v-on (@) 绑定事件到方法，处理事件对象，并使用 .prevent 和 .stop 修饰符。
- 使用 v-model 实现表单输入元素的双向绑定，并了解其在不同输入类型上的用法。
- 能够使用 .lazy, .number, .trim 等 v-model 修饰符。
- 尝试将这些指令和修饰符结合起来解决一些简单的界面交互问题。