Vue
Vue2 到 Vue3 系列文章
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Ofra Serendipity！
wechat- alipay
相关推荐
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-23
Vue2 实战案例：水果购物车
功能需求分析购物车模块共包含以下六个功能需求： 动态渲染：根据商品数据列表渲染购物车条目，支持结构互斥显示（有数据时显示购物车主体，无数据时显示空状态）。 删除功能：点击删除按钮移除指定商品，通过 ID 过滤原数组实现数据更新。 数量修改：通过加减按钮调整单个商品购买数量，需限制最小值为 1。 全选/反选：底部全选复选框状态由所有商品选中状态动态计算；勾选/取消全选时同步更新所有商品选中状态。 选中项统计：实时统计已选商品的总数量与总价，仅计入 is_checked 为 true 的条目。 本地持久化：将用户操作后的购物车数据序列化后存入 localStorage，页面刷新后从本地读取并初始化状态。 说明：本案例未调用后端接口，所有数据操作均在前端完成，localStorage 作为持久化存储方案。 样式模板CSS12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970...
2026-06-11
Vue快速上手
初识Vue
2026-07-17
Vue2到vue3
Vue 3入门与优势解析学习 Vue 3 的核心驱动力市场需求与薪资提升在前端开发岗位中，技术栈的掌握程度直接决定了薪资水平与职业发展。 Vue 2：通常适用于职业起步阶段，能够帮助开发者获取基础薪资。 Vue 3：已成为获取中高薪的必备核心技能。掌握 Vue 3 能够显著提升开发者的核心竞争力。 官方版本迭代策略Vue 作者尤雨溪（Evan You）及官方团队已明确 Vue 3 的战略地位： 默认版本：Vue 3 现已成为脚手架创建项目及官方文档展示的默认版本。 版本维护：Vue 2 已停止新增功能，仅进行日常维护与漏洞修复。官方全面主推 Vue 3 生态。 平滑的学习曲线与向前兼容从 Vue 2 升级到 Vue 3 的学习成本极低： 向前兼容：Vue 3 兼容了绝大部分 Vue 2 的核心语法。 快速过渡：具备 Vue 2 基础的开发者，仅需极短时间即可掌握 Vue 3 的核心特性与语法差异，实现技术栈的平滑升级。 Vue 3 的四大核心优势Vue 3 在底层架构与 API 设计上进行了全面重构，具备以下四大核心优势： 更易维护 组合式 API (Composit...
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...
2026-07-13
Vuex状态管理全套用法
Vuex 状态管理入门Vuex 的核心概念 官方定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理工具。 概念解析： 工具属性：可将其理解为 Vue 生态中的一个核心插件。 状态定义：在 Vuex 的语境中，状态即数据。 核心功能：Vuex 的核心作用是帮助开发者管理应用中的数据。 管理的数据类型：Vuex 主要用于管理通用数据，即多组件共享的数据。 典型案例（购物车场景）：在购物车页面中，商品数量的增减操作不仅影响当前商品列表的显示，还需要同步更新底部结算组件的总价，甚至在后续的确认订单页面中也需要调用该数据。此类跨组件频繁使用的数据，即为通用数据。 Vuex 的应用场景Vuex 主要适用于以下两大核心场景，其本质特征是数据的通用性与多组件共享： 多组件读取同一状态 某个状态需要在多个不同的组件中被读取和渲染。 示例：用户登录后保存的个人信息。该信息可能同时需要在首页、商品详情页、订单页等多个组件中展示。虽然不一定频繁修改，但多处均需使用。 多组件共同维护同一状态 多个组件不仅需要读取数据，还需要对该数据进行修改和更新。 示例：即使只有少数几个组件...
评论
TwikooWaline