- 博客(52)
- 收藏
- 关注
RSS订阅原创 Vue深入组件：组件 v-model 详解2
Vue 3.4+ 的 v-model 通过 defineModel() 宏简化了双向绑定实现。支持参数化绑定（v-model:title）实现多个数据同步，可通过 defineModel('title') 适配。修饰符功能允许自定义值处理（如首字母大写），通过解构 modifiers 对象并配置 get/set 方法实现。defineModel() 自动处理 prop 和事件，底层仍是 modelValue/update:modelValue 机制，但大幅减少了代码量，支持更灵活的多值绑定和值转换场景。
2025-08-18 17:33:02
113
原创 Vue深入组件：组件 v-model 详解1
Vue 3.4+ 的 defineModel() 宏简化了组件间双向绑定实现，自动处理 prop 和事件逻辑。子组件通过 const model = defineModel() 获取可双向绑定的 ref，修改 model.value 会同步到父组件。底层仍基于 modelValue prop 和 update:modelValue 事件机制，支持参数配置如必填和默认值。相比手动实现 prop/事件，defineModel() 大幅减少了样板代码，使父子组件数据同步更加简洁高效。
2025-08-18 17:31:46
26
原创 Vue深入组件：组件事件详解2
Vue组件事件声明与校验摘要：Vue推荐显式声明组件事件以提升可读性和区分透传属性。使用<script setup>时，通过defineEmits()宏声明事件，支持数组、对象和TypeScript类型标注三种形式；非<script setup>则使用emits选项。事件校验通过定义验证函数实现，开发阶段可检查参数合法性。显式声明事件能明确组件API、避免原生事件冲突，校验则规范数据传递格式。合理使用事件机制可使组件通信更清晰可靠。
2025-08-18 17:30:49
138
原创 Vue深入组件：组件事件详解1
组件事件是Vue中子组件向父组件通信的核心机制，通过$emit触发事件并传递数据，父组件使用v-on监听。子组件可在模板中直接$emit('事件名',参数)，父组件通过内联函数或方法接收参数。事件不支持冒泡，但支持.once修饰符。事件命名推荐子组件camelCase、父组件kebab-case，参数会完整传递给父组件处理函数。这种机制实现了清晰的父子组件解耦通信。
2025-08-18 17:30:02
30
原创 Vue深入组件：Props 详解3
Vue 的 props 采用单向数据流原则，子组件不能直接修改父组件传入的 props 值。当需要修改时，应根据场景选择合适方案：作为初始值时创建局部状态，需要转换时使用计算属性。Vue 支持对 props 进行类型校验，包括基础类型检查、必填性验证、默认值设置等，确保组件正确使用。特别注意布尔类型的特殊转换规则和对象/数组类型的引用特性。通过合理配置 props 校验规则，可以提升组件健壮性，减少潜在错误。
2025-08-17 17:07:17
37
原创 Vue深入组件：Props 详解2
本文介绍了 Vue 组件间传递 props 的细节。在命名上，推荐组件内声明使用 camelCase，父组件传递时使用 kebab-case。props 分为静态和动态类型，非字符串值需用 v-bind 绑定。文章详细说明了 Number、Boolean、Array 和 Object 等不同数据类型的传递方式，并介绍了通过 v-bind 批量传递对象属性的技巧。这些规范确保了 props 在 JavaScript 和 HTML 中的一致性，同时提供了灵活的传值方式。
2025-08-17 17:06:25
27
原创 Vue深入组件：Props 详解1
本文全面解析 Vue 中的 props 机制，包括声明方式、类型校验和响应式处理。props 是父子组件通信的核心方式，子组件需显式声明接收的 props。在 <script setup> 中使用 defineProps 宏，否则通过 props 选项声明。推荐对象形式声明 props，便于类型校验和文档说明。Vue 3.5+ 优化了解构 props 的响应性，但仍需注意在 watch 等场景下使用 getter 函数保持响应式。TypeScript 项目可通过类型标注简化声明，获得更好的类型支
2025-08-17 17:05:39
152
原创 Vue深入组件：组件注册详解
Vue组件注册分为全局和局部两种方式。全局注册通过app.component()方法实现，组件可在整个应用中使用；局部注册通过components选项或<script setup>自动完成，限定使用范围，优化打包体积并明确依赖关系。组件命名推荐PascalCase格式，在模板中支持PascalCase和kebab-case两种写法。全局注册适合通用组件，局部注册则更适用于业务组件，有助于提高代码可维护性和打包优化。合理选择注册方式能构建结构清晰的Vue应用。
2025-08-17 17:04:26
33
原创 Vue组件生命周期钩子：深入理解组件的生命周期阶段
Vue组件生命周期钩子是在组件创建、挂载、更新和销毁等关键阶段自动执行的函数。常用的钩子包括onMounted（DOM挂载后操作）、onUpdated（DOM更新后处理）和onUnmounted（组件卸载时资源清理）。钩子必须同步注册，不能在异步操作中调用，否则无法关联组件实例。不同钩子对应不同生命周期阶段，开发者可根据需求选择合适的钩子介入，如初始化数据、操作DOM或清理资源。理解并正确使用生命周期钩子，能够有效控制组件行为，避免内存泄漏等问题。
2025-08-16 20:27:37
180
原创 Vue组件基础解析
Vue组件是构建应用的基础单元，支持单文件组件（SFC）和JS对象两种定义方式。组件通过props接收父组件数据，通过事件向父组件通信，使用插槽接收内容。动态组件可通过<component :is>实现切换。组件注册分局部和全局，命名需遵循PascalCase或kebab-case规范。DOM内模板需注意大小写转换和闭合标签等解析限制。组件化开发可实现代码复用、状态隔离和逻辑封装。
2025-08-16 20:21:32
62
原创 模板引用（Template Refs）全解析2
本文介绍了Vue中模板引用的核心用法。重点讲解了在v-for中使用模板引用的自动数组特性（Vue 3.5+），以及通过函数模板引用手动收集引用的方案。文章还涵盖了TypeScript类型标注技巧，并强调模板引用应作为访问DOM元素或子组件实例的补充方案，而非主要交互方式。关键点包括：useTemplateRef的基础用法、组件引用需要defineExpose、v-for引用的版本差异处理，以及函数模板引用的灵活应用场景。
2025-08-15 21:50:45
52
原创 Vue模板引用（Template Refs）全解析1
Vue中的模板引用(Template Refs)提供直接访问DOM元素或子组件实例的能力。在Vue 3.5+中推荐使用useTemplateRef函数创建引用，通过ref属性与模板关联。访问DOM元素需在组件挂载后(onMounted)进行，初始值为null。对于子组件引用，需通过defineExpose显式暴露要访问的属性和方法。模板引用适用于需要直接操作DOM的场景(如焦点控制、第三方库集成等)，但应优先考虑声明式的props/emit方式实现组件交互，以保持代码解耦。
2025-08-15 21:49:41
68
原创 Vue 侦听器（watch 与 watchEffect）全解析3
Vue响应式侦听器(watch/watchEffect)的核心使用技巧包括：1)通过onCleanup或onWatcherCleanup(3.5+)注册清理函数，及时终止过期异步操作；2)利用flush选项(pre/post/sync)控制回调执行时机，post适合DOM更新后操作；3)异步创建的侦听器需手动停止，同步创建的会自动随组件卸载销毁。watch适合精确控制依赖，watchEffect自动追踪依赖更简洁。合理选择侦听方式和配置，可避免内存泄漏和性能问题。
2025-08-15 21:16:34
422
原创 Vue 侦听器（watch 与 watchEffect）全解析2
摘要： watchEffect 是 Vue 中自动追踪依赖的侦听器，相比 watch 更简洁： 自动依赖收集：无需手动指定数据源，直接追踪回调中的响应式状态（如 todoId.value）。 立即执行：默认首次执行回调，无需 immediate 选项，依赖变化时自动重新运行。 适用场景：依赖多且动态（如多个 ref 联动）、无需旧值、追求代码简化的场景。 注意点：异步回调中仅同步部分的状态会被追踪，需拆分逻辑或预访问异步依赖。 与 watch 对比，watchEffect 省去手动维护依赖，但牺牲精准控制能
2025-08-15 21:15:34
46
原创 Vue 侦听器（watch 与 watchEffect）全解析1
Vue 组合式 API 中的 watch 和 watchEffect 是处理响应式状态变化的核心工具。watch 需要明确指定侦听的数据源（支持 ref、getter 函数或数组），提供精准控制，可获取新旧值对比。它支持深层侦听（deep: true）、立即执行（immediate: true）和单次触发（once: true）等特性，适用于需要细粒度控制副作用的场景。注意侦听 reactive 对象属性时需用 getter 函数，且深层侦听可能带来性能开销，建议谨慎使用。
2025-08-15 21:14:02
134
原创 表单输入绑定详解
Vue的v-model指令简化了表单输入与变量的双向绑定，根据表单元素类型自动选择对应的DOM属性和事件。支持文本输入、复选框、单选按钮、选择器等表单元素，并提供.lazy、.number、.trim等修饰符调整行为。v-model会忽略元素初始值，以JavaScript响应式数据作为唯一数据源。对于动态值绑定，可使用v-bind设置自定义值。该指令大大减少了手动处理值绑定和事件监听的工作量，是Vue表单交互的核心功能。
2025-08-14 17:02:12
15
原创 Vue事件处理详解
Vue事件处理指南摘要：Vue通过v-on指令（简写@）监听DOM事件，支持内联和方法两种处理器。内联处理器适合简单逻辑（如count++），方法处理器适合复杂逻辑（可接收原生事件对象）。可通过$event或箭头函数传递事件参数，使用事件修饰符（如.stop、.prevent）简化常见DOM操作。还提供按键修饰符（.enter等）、系统按键修饰符（.ctrl）和鼠标按键修饰符（.left），并通过.exact实现精确控制。这些特性使事件处理更简洁高效。
2025-08-14 16:53:12
13
原创 # Vue 列表渲染详解
本文详细介绍了Vue.js中v-for指令的核心用法与最佳实践。主要内容包括：基本语法item in items、索引与作用域访问、解构赋值、多层嵌套、对象遍历、范围值迭代等核心功能。特别强调了key属性的重要性，用于高效管理列表状态。同时解析了v-for与v-if的共存问题、组件中使用v-for的方法，以及数组变化侦测机制。最后介绍了通过计算属性实现列表过滤排序的技巧，并提醒注意避免直接修改原数组的操作。文章为开发者提供了全面的v-for使用指南。
2025-08-14 16:46:03
26
原创 Vue 条件渲染详解
Vue提供了多种条件渲染指令：v-if根据条件添加/移除DOM元素，v-else和v-else-if实现多分支条件判断；v-show通过CSS控制显示/隐藏但始终保留DOM。v-if适合不频繁切换的场景，v-show适合频繁切换。两者可结合<template>实现多元素条件分组。注意避免v-if和v-for同时使用同一元素，可能影响性能。合理选择这些指令能创建动态交互的界面。
2025-08-13 00:27:13
20
原创 Vue 中的 Class 与 Style 绑定详解2
Vue.js的:style指令支持绑定CSS样式对象或数组，自动处理浏览器前缀兼容。可以绑定JavaScript对象（键为CSS属性名，值为属性值），支持camelCase和kebab-cased命名。推荐将样式集中为对象管理，也可与常规style属性共存。数组绑定会按序合并样式，重复属性会被覆盖。Vue会自动添加必要的前缀，并支持为属性提供多值备选方案，确保浏览器兼容性。
2025-08-11 22:12:13
448
原创 Vue 中的 Class 与 Style 绑定详解1
Vue 提供了强大的动态样式绑定功能，通过 v-bind 可以灵活管理元素的 class 和 style。绑定 class 支持对象和数组两种方式：对象语法可根据数据状态动态切换类名，数组语法可同时应用多个类。对象语法适合条件性样式，可与计算属性结合处理复杂逻辑；数组语法适合组合多个类名，支持三元表达式条件渲染。在组件中使用时，class 会自动合并到根元素，多根组件可通过 $attrs 指定接收位置。这些特性使动态样式管理更加简洁高效。
2025-08-11 22:11:11
522
原创 Vue计算属性详解2
Vue计算属性支持可写功能和获取上一个值（3.4+）。可写计算属性通过同时定义getter和setter实现，当修改计算属性时会触发setter更新依赖数据。Vue 3.4+允许getter接收第一个参数获取计算属性的上一个值。最佳实践包括：getter应无副作用、避免直接修改计算属性值，而应通过更新源状态触发重新计算。这些特性使计算属性能更高效地处理派生数据，提升代码可维护性。
2025-08-06 19:59:27
168
原创 Vue计算属性详解1
计算属性是Vue中处理复杂响应式数据的声明式方式，通过computed()函数定义，能自动追踪依赖并缓存结果。相比直接在模板中编写逻辑，计算属性使代码更清晰、可维护；相比方法调用，计算属性具有缓存特性，只在依赖变化时重新计算，避免不必要的性能开销。计算属性特别适用于处理复杂逻辑和需要复用的数据场景，但不适用于无响应式依赖的情况。
2025-08-06 19:58:41
24
原创 Vue 响应式基础全解析2
本文介绍了Vue 3的响应式系统核心概念。重点讲解了DOM更新时机、reactive()方法创建对象响应式状态的原理及限制，以及ref解包规则。主要内容包括：Vue通过缓冲修改在"next tick"周期统一更新DOM；reactive()创建对象代理的响应式特性；ref在模板和响应式对象中的自动解包机制；以及reactive()对值类型、对象替换和解构操作的限制。文章强调理解这些响应式基础对于高效管理Vue应用状态的重要性，并推荐结合<script setup>语法使用re
2025-08-02 22:40:31
174
原创 Vue 响应式基础全解析1
Vue的组合式API通过ref()提供响应式状态管理，支持任意数据类型并保持深层响应性。ref()返回包装对象，需通过.value访问值，但在模板中自动解包。<script setup>语法糖简化了组件代码，自动暴露顶层声明。响应式原理基于依赖追踪，通过getter/setter拦截变化并触发更新。shallowRef()可优化性能，仅追踪顶层的.value变化。组合式API相比选项式API更灵活，便于组织复杂逻辑和复用代码。
2025-08-02 22:39:57
18
原创 Vue模板语法详解：从基础到进阶的响应式绑定指南3
Vue指令是带有v-前缀的特殊HTML属性，用于实现数据驱动的DOM操作。指令语法包含三部分：v-指令名:参数.修饰符="表达式"，其中参数指定作用目标（如href或click），动态参数[attr]可实现参数名动态变化，修饰符添加额外行为（如.prevent）。指令将常见DOM操作封装为简洁语法，如v-bind绑定属性（简写:）、v-on监听事件（简写@），通过自动响应数据变化，让开发者专注于数据与视图的关联而非具体DOM操作。
2025-08-01 12:25:36
23
原创 Vue模板语法详解：从基础到进阶的响应式绑定指南2
Vue模板中的JavaScript表达式使用指南：在文本插值和指令属性中，Vue允许使用JavaScript表达式（如运算、三元表达式、方法调用），但不支持语句（如变量声明、条件块）。表达式能访问组件数据和方法，但应避免副作用操作。全局对象访问受限，仅可访问安全内置对象，自定义全局变量需通过app.config.globalProperties注册。这种设计平衡了灵活性与可维护性，确保模板专注于视图描述而非复杂逻辑。
2025-08-01 12:24:54
23
原创 Vue模板语法详解：从基础到进阶的响应式绑定指南1
Vue模板语法通过声明式绑定实现数据与视图的自动同步。核心功能包括：文本插值（{{ }}）用于纯文本显示，v-html指令用于渲染HTML片段（需注意XSS风险），以及v-bind（可简写为:）实现属性绑定，支持布尔型属性和多属性对象绑定。这些语法都基于响应式机制，数据变化时DOM自动更新，让开发者专注于业务逻辑而非DOM操作。Vue 3.4+还支持属性同名简写，进一步简化代码。不同的绑定方式适用于不同场景，但共同遵循"数据驱动视图"的核心原则。
2025-08-01 12:24:07
402
原创 Vue3 应用的挂载，配置解读
本文介绍了Vue应用挂载的基本操作和相关配置。应用实例需通过.mount()方法挂载到DOM容器，容器可以是元素或CSS选择器。根组件模板可直接写在挂载容器内，适用于无构建步骤的场景。应用配置通过.config对象实现，如全局错误处理，且需在挂载前完成所有配置。Vue支持创建多个独立的应用实例，每个实例拥有独立的配置和资源作用域，适合局部增强服务端渲染页面的场景。
2025-07-31 15:09:00
38
原创 Vue 3 创建一个Vue应用解读-1
Vue应用从createApp函数开始创建，传入根组件配置生成应用实例。根组件作为组件树的起点，通常以单文件组件形式存在。实际开发中，应用由嵌套组件组成树状结构，如Todo应用中的多级组件。组件间通过props传递数据、事件通信，实现功能解耦。这种组件化架构使复杂应用保持代码清晰和可维护性，体现Vue的核心优势。
2025-07-30 19:47:19
247
原创 Vue 3 快速上手原文解读-2.2
本文介绍了通过CDN引入Vue的两种主要方式及其适用场景。全局构建版本适合快速入门，无需配置即可使用；ES模块版本则适配现代浏览器，支持模块化开发。文章还讲解了如何使用Import Maps简化导入路径，以及模块化拆分的实践方法。最后给出了生产环境部署建议和不同场景下的引入方案选择指南，帮助开发者根据项目需求灵活选用合适的Vue引入方式。
2025-07-30 11:38:43
28
原创 快速上手解析-2.1（Vue项目的搭建）
本文介绍了在本地搭建Vue单页应用的完整流程。首先需要安装最新版Node.js和npm，并确认工作目录。通过npm create vue@latest命令创建项目，使用Vite构建工具并默认选择组合式API。项目创建后需安装依赖并运行开发服务器。最后讲解了生产环境构建命令npm run build会生成优化后的dist文件夹，可部署到Nginx等服务器。文中详细说明了从环境准备到项目创建、开发调试及生产部署的全过程。
2025-07-30 11:33:20
307
原创 Vue 3 简介解析-2
Vue框架提供了单文件组件(SFC)和两种API风格来组织代码。单文件组件将HTML模板、JavaScript逻辑和CSS样式封装在.vue文件中，便于开发维护。Vue支持选项式API和组合式API两种编码风格：选项式API通过data、methods等预定义选项组织代码，通过this访问组件状态；组合式API则使用ref、onMounted等可导入函数，配合<script setup>语法糖，能自动暴露变量、简化代码并提升类型推断，更适合复杂场景。两种风格可根据项目需求灵活选用。
2025-07-29 18:52:15
16
原创 Vue 3 简介解析-1
Vue是一款渐进式JavaScript框架，专注于构建用户界面。其核心优势在于基于标准HTML、CSS和JavaScript，提供声明式、组件化的开发模式，简化界面开发流程。Vue既可作为简单工具增强静态HTML，也能用于开发复杂单页应用(SPA)和服务端渲染(SSR)项目。其渐进式特性允许开发者根据需求灵活选择功能模块，支持从Web页面到桌面/移动应用的全平台开发，并拥有丰富的生态系统（如VueRouter、Vuex等），是当前主流的前端框架之一。
2025-07-29 10:01:37
285
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人