Vue
Vue2 到 Vue3 系列文章
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Ofra Serendipity！
wechat- alipay
相关推荐
2026-06-01
Vue快速上手
初识Vue
2026-07-11
Vue CLI 自定义创建项目与 ESLint 代码规范
Vue CLI 自定义创建项目与工程化配置在之前的学习中，已经掌握了 Vue Router 的基本使用步骤。但在实际开发中，手动配置路由存在明显的痛点：每次创建新项目都需要手动安装 vue-router、导入并创建路由实例、配置路由规则以及搭建初始项目骨架，过程繁琐且效率低下。 为了解决这一问题，可以使用 Vue CLI 的自定义创建项目功能，在初始化阶段一次性搭建好包含路由及代码规范的完整项目骨架。本节课的核心目标是掌握自定义创建项目的流程，并初步引入 ESLint 代码规范工具，为后续学习 Vuex 状态管理以及企业级项目开发奠定基础。 自定义创建项目实操步骤初始化项目确保已全局安装 Vue CLI 脚手架。在目标目录下打开终端（如 PowerShell），执行以下命令创建项目： 1vue create 项目名称 例如，创建一个名为 demo 的移动端测试项目： 1vue create demo 选择项目特性 (Features)命令执行后，脚手架会提示选择预设模式。使用键盘上下方向键选择第三项 Manually select features（自定义选择特性），按回车确认。...
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-07-06
Vue 组件通信
组件通信概述组件通信是指不同 Vue 组件之间进行数据传递与事件交互的机制。Vue 采用单向数据流设计原则，每个组件的数据（data）具有独立作用域，组件仅能直接访问自身定义的数据，无法直接读取或修改其他组件的数据。 例如：组件 A 的 data 中定义的变量 message，在组件 B 的模板或逻辑中无法直接引用。若组件 B 需要使用该值，必须由组件 A 主动通过标准化的通信机制将数据传递给组件 B。 因此，组件通信的本质是建立受控、可追溯、符合响应式原理的数据流动通道，其具体方案的选择取决于组件之间的关系类型。 组件关系分类在 Vue 应用中，组件间关系可严格划分为两类： 父子关系 定义：一个组件（父组件）在模板中直接渲染另一个组件（子组件），即子组件标签作为父组件模板的一部分被声明。 判定标准：存在明确的 DOM 包含层级，子组件实例由父组件创建并管理生命周期。 示例：1234567<!-- 父组件 Parent.vue --><template> <div> <Child /> <!-- Child 是 Par...
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-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、...
评论
TwikooWaline