Vue2 实战案例：水果购物车
功能需求分析
购物车模块共包含以下六个功能需求：
- 动态渲染：根据商品数据列表渲染购物车条目，支持结构互斥显示（有数据时显示购物车主体，无数据时显示空状态）。
- 删除功能：点击删除按钮移除指定商品，通过 ID 过滤原数组实现数据更新。
- 数量修改：通过加减按钮调整单个商品购买数量，需限制最小值为 1。
- 全选/反选：底部全选复选框状态由所有商品选中状态动态计算；勾选/取消全选时同步更新所有商品选中状态。
- 选中项统计：实时统计已选商品的总数量与总价，仅计入
is_checked为true的条目。 - 本地持久化：将用户操作后的购物车数据序列化后存入
localStorage，页面刷新后从本地读取并初始化状态。
说明：本案例未调用后端接口，所有数据操作均在前端完成，
localStorage作为持久化存储方案。
样式模板
CSS
1 | <style> |
HTML
1 | <div id="app" class="cart-wrap"> |
Vue实例
1 | <script> |
这里使用picsum随机图片。
渲染功能实现
结构互斥控制
购物车主体区域与空状态区域互斥显示，使用 v-if / v-else 实现条件渲染：
1 | <!-- 购物车主体（有数据时显示） --> |
v-if="fruitList.length > 0"判断数据是否存在；v-else自动绑定互斥逻辑，无需重复条件表达式。
商品列表动态渲染
使用 v-for 指令遍历 fruitList 数组，生成商品条目：
1 | <div class="cart-item" v-for="item in fruitList" :key="item.id"> |
:key必须绑定唯一标识：优先使用item.id，确保虚拟 DOM 更新准确性；- 仅保留一个模板节点：删除冗余静态条目，由
v-for动态生成全部实例。
表单项与数据绑定
选中状态绑定
使用 v-model 双向绑定复选框状态至 item.is_checked：
1 | <input type="checkbox" v-model="item.is_checked"> |
v-model自动同步视图与数据，item.is_checked为布尔值；- 初始值决定默认选中状态（
true选中，false未选中）。
图片与文本内容动态渲染
图片
src属性使用v-bind:src（简写:）绑定：1
<img :src="item.img">
单价、数量、小计使用插值语法
{{ }}渲染：1
2
3
4<div class="item-name">{{item.name}}</div>
<span class="price">{{ item.price }}</span>
<span class="count">{{ item.count }}</span>
<span class="subtotal">{{ item.price * item.count }}</span>
动态样式控制
选中状态对应 .active 样式类，使用对象语法动态绑定：
1 | <div class="cart-item" :class="{ active: item.is_checked }" v-for="item in fruitList" :key="item.id"> |
:class接收对象，键为类名，值为布尔表达式；item.is_checked值变化时，.active类自动添加或移除；v-model与:class协同工作，实现视图与状态完全同步。
关键点总结：渲染功能实现分为三步——
（1）使用v-if/v-else控制整体结构显隐；
（2）使用v-for+:key渲染列表；
（3）使用v-model绑定表单状态，:class动态控制样式。
删除与数量修改功能
删除功能实现
事件注册与参数传递
为删除按钮绑定点击事件，传递当前商品 ID：
1 | <button @click="handleDelete(item.id)">删除</button> |
数据过滤逻辑
在 methods 中定义 handleDelete 方法，使用 filter() 创建新数组：
1 | methods: { |
filter()返回满足条件的新数组，不修改原数组；item.id !== id保留非目标项，实现逻辑删除。
数量修改功能
加减按钮事件绑定
为加减按钮分别绑定事件，传递商品 ID：
1 | <button @click="handleAdd(item.id)">+</button> |
查找与更新逻辑
使用 find() 定位目标商品，直接修改其 count 属性：
1 | methods: { |
find()返回匹配的第一项引用，可直接修改属性；- 减操作增加边界判断
item.count > 1，防止数量小于 1。
减号按钮禁用控制
使用 :disabled 动态绑定禁用状态，与if (item && item.count > 1) item.count--;不同的是:disabled会把按钮禁用，而边界判断只是单纯减不下去。
1 | <button @click="handleSub(item.id)" :disabled="item.count <= 1">−</button> |
:disabled值为true时按钮不可点击；item.count <= 1确保数量为 1 时禁用减号。
关键点总结：
- 删除：
@click传参 →filter()生成新数组；- 修改数量：
@click传参 →find()获取引用 → 直接修改count；- 边界控制：减操作前校验
count > 1，并通过:disabled同步 UI 状态。
全选/反选功能实现
计算属性完整写法
全选状态 isAll 由所有商品选中状态计算得出，且需支持双向同步，必须使用计算属性的 get/set 完整写法：
1 | computed: { |
get 方法逻辑
every()遍历所有商品，要求每一项item.is_checked均为true才返回true；this.fruitList.length > 0防止空数组时every()返回true（空数组every默认返回true）；- 返回值决定全选复选框的初始状态。
set 方法逻辑
value为用户操作全选框时传入的新布尔值；forEach()遍历所有商品，统一设置item.is_checked = value；- 实现全选框状态变更时，所有商品同步更新。
模板绑定
1 | <input type="checkbox" v-model="isAll"> |
v-model自动关联isAll的get和set；- 用户勾选触发
set(true)，取消触发set(false)。
关键点总结：全选/反选必须使用计算属性完整写法；
get实现“子项控制父项”（所有商品状态决定全选框）；set实现“父项控制子项”（全选框状态同步所有商品）；every()是判断“全部满足条件”的标准数组方法。
选中项统计功能
总数量统计
使用 reduce() 对选中商品的 count 累加：
1 | computed: { |
reduce()初始值设为0；- 回调函数中判断
item.is_checked，仅对选中项累加item.count； - 未选中项返回
sum（不累加），保持累加器不变。
总价统计
逻辑同总数量，但累加项为 item.count * item.price：
1 | computed: { |
模板渲染
1 | <div class="cart-footer"> |
关键点总结：
- 统计功能必须使用
computed，确保响应式更新；reduce()是求和的标准方法，初始值必须明确；- 条件判断（
item.is_checked）必须置于累加逻辑内，确保仅统计选中项。
本地持久化功能
数据变更监听
使用 watch 深度监听 fruitList，触发 localStorage 写入：
1 | watch: { |
deep: true启用深度监听，捕获嵌套属性变化；immediate: true在组件创建时立即执行一次 handler（确保初始数据写入）；JSON.stringify()将数组序列化为字符串后存入。
初始化数据读取
在 data() 中从 localStorage 读取并解析初始数据：
1 | // 默认数据（当 localStorage 为空时使用） |
localStorage.getItem('list')读取字符串；|| defaultList提供兜底数据，避免null导致解析错误；JSON.parse()将字符串还原为数组对象。
异常处理说明
- 若用户清空
localStorage，getItem()返回null； JSON.parse(null)抛出错误，故必须使用||提供默认值；- 默认值应为有效数组，确保后续
v-for渲染正常。
关键点总结：
- 写入：
watch+deep: true+JSON.stringify()；- 读取：
localStorage.getItem()+JSON.parse()+ 默认值兜底；- 持久化时机：任何
fruitList变更（增删改选中状态）均触发存储。
完整代码
1 |
|
综合知识点回顾
| 功能模块 | 核心技术点 | 关键代码特征 |
|---|---|---|
| 渲染 | v-if/v-else、v-for、v-model、:class |
v-for="item in list" + :key="item.id" + :class="{ active: item.is_checked }" |
| 删除 | 事件传参、filter() |
@click="handleDelete(id)" + list.filter(item => item.id !== id) |
| 数量修改 | find()、边界判断、:disabled |
list.find(item => item.id === id) + item.count > 1 + :disabled="item.count <= 1" |
| 全选/反选 | 计算属性 get/set、every() |
computed: { isAll: { get() { ... }, set(value) { ... } } } |
| 统计 | computed、reduce()、条件累加 |
list.reduce((sum, item) => item.is_checked ? sum + ... : sum, 0) |
| 持久化 | watch 深度监听、localStorage、JSON 序列化 |
watch: { list: { deep: true, handler() { ... } } } |
工程规范强调：
- 所有
v-for必须绑定:key；- 复杂数据操作优先使用不可变方式（如
filter()返回新数组）；- 用户输入相关状态必须双向绑定（
v-model）；- 本地存储必须处理
null边界情况；- 计算属性仅用于派生状态，禁止在其中执行副作用操作。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Ofra Serendipity！
- wechat
- alipay
相关推荐
2026-06-23
watch 侦听器
watch 的基本概念与适用场景watch 是 Vue 实例的一个配置选项，中文常译为监视器或侦听器。其核心作用是响应式地监视数据的变化，并在变化发生时执行指定的回调函数。 watch 的典型适用场景包括： 需要对数据变化作出异步响应（如发送 HTTP 请求）； 需要执行开销较大的操作（如节流、防抖、复杂计算），不宜直接在模板中处理； 需要同时获取变化前的值（oldValue）与变化后的值（newValue）； 监视深层嵌套对象的特定属性或计算属性的依赖项。 注意：watch 不适用于简单的派生状态计算——此类需求应优先使用 computed。watch 的设计目标是执行副作用（side effects），而非声明式计算。 watch 的语法规范Vue 2 中 watch 支持两种书写形式：简单写法与完整写法。二者均需定义在 Vue 实例选项中，与 data、methods 等同级。 简单写法（适用于监视顶层响应式属性）当需监视 data 选项中定义的第一层级的简单类型属性（如 String、Number、Boolean）时，采用简单写法： 1<textarea v...
2026-06-12
Vue2的常用指令
Vue2的常用指令
2026-06-21
Vue 2 实战案例：记事本
案例介绍本教程基于 Vue 2 框架，指导学习者实现一个功能完整的前端记事本应用——“Todo记事本”。通过本案例，学习者将系统掌握以下核心能力： 使用 v-for 指令完成动态列表渲染，并正确绑定 key 属性 基于唯一标识符（ID）实现数据项的安全删除 运用数组高阶方法 filter() 构建不可变式数据更新逻辑 理解索引（index）与业务 ID 的语义差异及其在 UI 序号展示中的正确使用原则 遵循响应式数据更新规范，确保视图与状态严格同步 功能概览小黑记事本包含四大核心功能模块： 任务列表渲染：将任务数据以结构化列表形式动态展示 任务删除：支持通过交互按钮移除指定任务项 任务新增：提供表单输入与提交机制，向列表追加新任务 任务统计与清空：实时显示任务总数，并支持一键清空全部任务 开发环境与初始结构环境要求 Vue 2.x（推荐 2.6.14 或以上稳定版本） 开发工具：VS Code（已配置 Vue 相关插件） 项目结构已初始化，包含基础 HTML 模板与 Vue 实例挂载点 初始模板结构12345678<div id="app"&g...
2026-07-01
Vue-CLI 脚手架工程化开发
工程化开发模式概述传统开发模式与工程化开发模式的本质区别 传统开发模式： 直接在 HTML 文件中通过 <script> 标签引入 Vue.js 等依赖； 编写的 JavaScript 和 CSS 代码即为浏览器最终运行的代码； 无构建过程，不支持现代前端语法特性（如 ES6+、单文件组件、预处理器等）。 工程化开发模式： 基于构建工具（如 Webpack、Vite）对源代码进行编译、转换和打包； 开发者编写的源代码并非浏览器直接可执行的代码； 构建工具负责将高级语法（如 import/export、async/await）、预处理器（如 Sass、Less）、单文件组件（.vue）等，转换为兼容目标浏览器的标准 JavaScript 和 CSS； 核心价值在于提升开发体验与代码质量，支持模块化、类型检查、热更新、代码分割等能力。 工程化开发面临的挑战 Webpack 等构建工具配置复杂，需手动编写大量 loader、plugin 及 resolve 规则； 不同项目间存在大量重复性基础配置（如 babel-loader、...
2026-07-09
Vue自定义指令与插槽
Vue2 自定义指令自定义指令概述内置指令与自定义指令在Vue框架中，系统内置了一系列指令（如 v-html、v-model、v-for 等），这些内置指令由Vue内部提供，各自拥有独立的功能。除了使用内置指令外，开发者还可以根据业务需求自行封装指令，这类指令被称为自定义指令。常见的自定义指令包括用于自动聚焦的 v-focus、控制加载效果的 v-loading 以及实现图片懒加载的 v-lazy 等。 自定义指令的核心作用自定义指令的主要作用是封装底层的DOM操作，从而扩展Vue的额外功能。通过将重复的DOM操作逻辑封装到指令内部，可以有效简化业务代码，提高代码的复用性和可维护性。 自定义指令的基础语法需求场景：页面加载自动获取焦点假设需求为：当页面加载完成后，使特定的输入框元素自动获取焦点。 传统实现方案及其局限性 HTML属性方案：使用 autofocus 属性。该方案在部分浏览器（如Safari）中存在兼容性问题，不推荐作为唯一方案。 DOM操作方案：在Vue组件的 mounted 生命周期钩子中，通过 this.$refs 获取DOM元素并调用其 focus() 方法。...
2026-06-21
指令修饰符与样式绑定
指令修饰符概述指令修饰符（Directive Modifiers）是 Vue 2 中用于增强指令功能的语法后缀，以英文句点 . 连接在指令名称之后。其本质是对底层 DOM 事件或数据绑定逻辑的预封装处理逻辑，目的是简化开发者代码、提升可读性与健壮性。 修饰符不改变指令的基本语义，而是在原有行为基础上添加特定条件判断或数据预处理。所有修饰符均遵循统一语法格式：v-xxx.modifier 关键要点： 修饰符是 Vue 提供的语法糖，对应底层明确的 JavaScript 行为； 使用修饰符可避免重复编写条件判断、类型转换、事件控制等样板代码； 所有修饰符均可被手动实现，但使用修饰符显著提升开发效率与代码简洁性。 常用事件修饰符.enter —— 键盘回车键事件过滤.enter 修饰符用于 v-on:keyup 指令，将通用键盘弹起事件限定为仅在用户按下 Enter 键 时触发。 使用方式12<input v-model="content"><button @keyup.enter="add">添加</but...