课八：Vue.js

响应式数据 · 模板语法 · 组件化 · 待办事项实战

一、核心知识点

  • Vue.js基础：
    • 引入方式：CDN引入、Vue CLI、Vite
    • 核心概念：Vue实例、响应式数据、虚拟DOM
    • 入口函数：createApp()、mount()
  • 模板语法：
    • 文本插值：{{ 表达式 }}
    • 指令：v-bind（属性绑定）、v-on（事件绑定，简写@）、v-model（双向绑定）
    • 条件渲染：v-if、v-else-if、v-else、v-show
    • 列表渲染：v-for（遍历数组/对象，key属性）
  • 响应式数据：
    • ref()：基本类型数据响应式（数字、字符串、布尔值）
    • reactive()：引用类型数据响应式（对象、数组）
    • 计算属性：computed()（缓存结果）
    • 侦听器：watch()（监听数据变化）
  • 事件处理：
    • 事件绑定：@click、@input、@submit等
    • 事件修饰符：.prevent（阻止默认行为）、.stop（阻止冒泡）
    • 按键修饰符：.enter、.esc等
  • 生命周期：
    • 常用钩子：onMounted（组件挂载后）、onUpdated（组件更新后）、onUnmounted（组件卸载后）

二、实操实例

实例名称

待办事项管理系统（Todo List）

实例目标

制作一个包含任务添加、编辑、删除、标记完成、筛选（全部/已完成/未完成）、本地存储功能的待办事项管理系统，掌握Vue.js模板语法、响应式数据、事件处理、计算属性等核心技能。

三、详细实现步骤

📁 步骤1：创建文件结构

lesson8/ ├── index.html ├── demo/ │ ├── index.html │ ├── css/ │ │ └── style.css │ └── js/ │ └── script.js

📄 步骤2：编写HTML结构

<!-- 核心结构见下方演示区源码，此处为关键部分 -->

🎨 步骤3：编写CSS样式

/* 样式已集成在演示区中，可参考下方演示区效果 */

⚙️ 步骤4：编写Vue.js逻辑

// 完整JS代码见演示区底部脚本，实现响应式数据、计算属性、本地存储

✅ Vue待办事项 · 在线演示

响应式数据 | 添加/编辑/删除 | 筛选 | 本地存储

▶️ 步骤5：运行与验证

  1. 直接在上方演示区操作，验证所有功能：
    • 添加任务：输入内容后点击“添加”按钮或按Enter键（空内容无法添加）
    • 编辑任务：双击任务文本或点击编辑按钮，修改后按Enter保存或ESC取消
    • 标记完成：点击复选框，任务文本显示删除线
    • 删除任务：点击右侧删除按钮
    • 筛选：点击“全部/未完成/已完成”切换视图
    • 清除已完成：点击底部按钮删除所有已完成任务
    • 本地存储：刷新页面后数据不丢失
  2. 调整浏览器窗口大小，观察响应式布局变化。
  3. 也可将完整代码复制到本地，进一步学习调试。

四、关键注意事项

  • Vue 3推荐使用Composition API（setup函数），相比Options API更灵活。
  • ref用于基本类型数据响应式，访问时需要通过 .value（模板中无需写.value）。
  • computed用于依赖响应式数据的计算逻辑，会缓存结果，提升性能。
  • watch监听引用类型（对象/数组）时，需要添加 { deep: true } 才能监听内部变化。
  • v-for遍历列表时，建议使用唯一ID作为key（而非index），避免DOM更新异常。
  • 本地存储只能存储字符串，需要使用JSON.stringify/JSON.parse进行数据转换。
  • 操作DOM元素时（如获取焦点），需要使用ref引用并在onMounted钩子中执行。
  • 编辑功能中使用setTimeout延迟获取焦点，确保DOM已完成更新。
← 返回总目录