- 博客(692)
- 资源 (82)
- 收藏
- 关注
RSS订阅原创 pinia修改数据的三种方式
本文介绍了Pinia中修改数据的三种方式：1) 直接修改状态值；2) 使用$patch批量修改；3) 通过actions封装业务逻辑。前两种适合简单修改，而actions更适合处理复杂业务场景，如购物车的商品添加、价格计算和结账流程等。actions能够封装复用逻辑，处理数据验证和异步操作，在复杂应用中优势明显。开发者可根据场景选择合适的数据修改方式，简单修改用前两种，复杂业务逻辑推荐使用actions。
2026-02-03 09:40:42
92
原创 搭建pinia环境及存储读取数据.
本文介绍了Pinia状态管理库的基本使用方法。首先需要安装Pinia并通过三个步骤引入到Vue应用中：引入createPinia、创建Pinia实例、挂载到应用实例。然后创建store文件夹集中管理状态，通过defineStore定义存储模块。文章演示了两个示例：一个求和功能，通过state存储sum值；一个诗句展示功能，存储诗句列表数据。最后展示了如何在组件中获取这些存储的数据。文章为后续学习如何修改Pinia存储的数据奠定了基础。
2026-01-30 14:08:44
147
原创 pinia一个简单的效果
本文演示了一个简单的Vue组件开发过程。首先创建了求和组件，包含数字选择和加减功能；然后开发了诗句展示组件，包含预设诗句和从API获取随机诗句的功能。两个组件都实现了基础交互并添加了样式效果。文章为后续学习Pinia状态管理库奠定了基础，展示了如何通过简单案例过渡到更复杂的状态管理方案。
2026-01-23 15:26:58
54
原创 pinia简介
Pinia简介与路由重定向 路由重定向 通过配置redirect属性可实现页面加载时自动跳转到指定路由，如默认路径/重定向到/club/list。 Pinia核心概念 Pinia是Vue的状态管理工具，用于集中管理应用状态： 解决组件间状态共享问题 提供响应式状态自动同步 复用状态修改逻辑 支持跨组件访问 适用场景 中大型Vue应用（如电商系统） 需要共享状态的场景（登录态、购物车） 多组件共用状态逻辑的情况 Pinia使状态管理更清晰高效，特别适合复杂应用的状态共享需求。
2025-12-04 20:47:47
202
原创 Vue3编程式路由导航
Vue3编程式路由导航摘要 Vue3提供了两种路由导航方式：声明式导航（使用<router-link>）和编程式导航（使用JavaScript代码）。编程式导航主要通过router.push()和router.replace()实现，前者会添加历史记录，后者会替换当前记录。编程式导航支持路径字符串和对象配置两种传参方式，适用于定时跳转等动态场景。在非组件环境中，可以导入路由实例实现导航功能。关键区别：useRouter用于导航跳转，useRoute用于获取当前路由参数。注意事项包括路径不存在处理
2025-12-03 12:04:45
945
原创 Vue3路由的props
Vue3路由中的props功能详解 Vue3路由的props功能主要用于将路由参数或自定义数据直接传递给组件。它有三种写法： 布尔值写法：仅传递params参数，参数名需与组件props一致 对象写法：传递静态数据，与路由参数无关 函数写法（最常用）：可混合传递params/query参数，并支持参数转换和自定义数据拼接 通过校园社团系统案例展示了三种写法的具体实现： 布尔值写法只能获取params参数 对象写法仅接收静态数据 函数写法可综合处理各类参数 这种设计使路由参数传递更加灵活，简化了组件获取路由参
2025-12-02 21:28:35
341
原创 Vue3路由params参数
Vue3路由params参数使用指南：params是Vue路由中的路径参数，符合RESTful规范。通过商品列表跳转详情页的示例，演示了如何配置路由（使用占位符:id）和在组件间传递参数。关键点包括：必须使用name而非path跳转、params默认传递字符串需手动转换类型、路由定义参数与实际传递参数需匹配。示例展示了从列表页点击商品，通过router.push传递id参数，在详情页使用useRoute获取参数并显示对应商品信息的完整流程。
2025-12-01 22:48:51
187
原创 Vue3路由query参数
Vue3路由query参数使用示例 本文演示了Vue3中如何使用路由query参数实现内容动态展示。通过在URL中传递type参数（如/contact?type=phone），子组件通过useRoute获取query参数，使用v-if条件渲染不同内容。父组件通过router-link的to对象写法传递query参数，实现点击不同按钮显示对应的联系信息（电话、邮箱、地址等）。这种方法实现了无页面刷新的内容切换，同时保持了URL的可读性和可分享性。
2025-11-30 22:26:33
194
原创 Vue3嵌套路由
Vue3嵌套路由是构建分层视图应用的重要功能。它通过在父路由组件内定义子路由，实现多级布局结构，特别适合后台管理系统等复杂场景。本文通过一个服务项目页面案例，展示了如何配置嵌套路由：在父组件中使用<router-view>展示子内容，在路由配置中定义children数组。关键点包括子路由路径不加"/"、使用useRouter进行导航跳转等。嵌套路由能有效组织具有层级关系的页面结构，提升应用的可维护性和用户体验。
2025-11-29 23:10:15
245
原创 Vue3命名路由
Vue3命名路由指南：介绍了路由导航的两种写法 - 字符串写法和对象写法。字符串写法简单但不够灵活，对象写法功能更强大，支持动态参数传递。重点讲解了命名路由的优势，包括解耦与可维护性、简化复杂路径导航等。通过给路由定义name属性，可以在组件中使用对象写法(:to="{name:'routeName'})进行导航，这样即使修改了实际路径，也不需要修改所有引用该路径的组件。推荐在非绝对静态页面中使用对象写法结合命名路由。
2025-11-28 20:56:18
302
原创 Vue3路由模式
Vue3提供了三种路由模式：history模式(createWebHistory)适合需要SEO的网站但需服务器配置；hash模式(createWebHashHistory)兼容性好无需服务器配置；memory模式(createMemoryHistory)适用于SSR和非浏览器环境。根据项目需求选择：官网推荐history模式，后台系统建议hash模式，SSR应用使用memory模式。现代项目优先考虑history模式以获得最佳用户体验和SEO效果。
2025-11-27 17:05:00
358
原创 关于VUE3路由的一些注意点
本文介绍了Vue中路由组件与一般组件的区别及使用建议。一般组件用于可复用UI部件，通过全局/局部注册使用；路由组件对应整个页面，通过路由配置和<router-view>渲染。最佳实践建议将路由组件放在views/pages目录，一般组件放在components目录，并使用懒加载提升性能。同时解释了组件切换时的生命周期变化，以及如何使用<keep-alive>缓存组件状态。最后提到路由守卫等高级状态管理方式将在后续学习。
2025-11-26 17:21:03
394
原创 vue3路由理解及简单效果
Vue Router是Vue.js官方路由管理器，用于构建单页面应用(SPA)。本文介绍了Vue Router的基本概念，包括路由(route)、路由器(router)、路由视图(routeview)和路由链接(routelink)。通过一个实际案例演示了如何创建路由配置：首先搭建基础HTML结构，添加CSS样式美化界面，然后安装Vue Router并创建路由配置文件(index.ts)，定义路由规则映射到不同组件(Home/About/Services/Contact)，最后展示各组件内容。案例中使用cr
2025-11-25 21:37:22
833
原创 自定义HOOKS
本文介绍了Vue3中的自定义HOOKS概念及其应用。自定义HOOKS是可复用的函数，内部使用Vue组合式API封装有状态逻辑，解决了Vue2中Mixins的命名冲突和维护困难问题。文章通过创建基于axios的请求HOOK示例，展示了如何定义响应式数据、请求方法和暴露接口。最佳实践包括：以use命名开头、专注单一功能、返回响应式对象、支持HOOK间组合调用。自定义HOOKS实现了逻辑与UI解耦，是掌握Vue3组合式API的关键，能显著提升代码复用性和模块化程度。
2025-11-24 11:53:14
54
原创 Vue3的生命周期
Vue3生命周期详解：从创建到卸载的全过程 Vue3的生命周期分为四个主要阶段：创建、更新、卸载和错误处理。创建阶段包含setup()、onBeforeMount()和onMounted()；更新阶段有onBeforeUpdate()和onUpdated()；卸载阶段包括onBeforeUnmount()和onUnmounted()。setup()替代了Vue2的初始化阶段，是组合式API的入口。子组件的生命周期会先于父组件执行。错误处理可使用onErrorCaptured()捕获和阻止错误传播。这些钩子函
2025-11-21 21:29:19
155
原创 Vue2的生命周期
Vue2生命周期概述：Vue组件从创建到销毁的完整过程分为创建、挂载、更新和销毁四个阶段，每个阶段都提供对应的钩子函数。主要阶段包括：创建阶段(beforeCreate/created)、挂载阶段(beforeMount/mounted)、更新阶段(beforeUpdate/updated)和销毁阶段(beforeDestroy/destroyed)。这些钩子函数允许开发者在特定时机执行数据初始化、DOM操作、资源清理等任务，确保组件正确运行并避免内存泄漏。合理使用生命周期钩子对组件开发、性能优化和资源管理
2025-11-18 20:11:07
224
原创 Props
本文介绍了Vue组件中的Props概念，重点讲解了其单向数据流特性以及声明方式。主要内容包括： Props是父组件向子组件传递数据的自定义属性，子组件必须显式声明接受的props 两种声明方式对比：字符串数组式（简单但不推荐）和对象式（功能完整，可指定类型、默认值） 类型限制的实践，通过TypeScript类型定义确保数据正确性 使用withDefaults设置默认值，处理父组件未传递数据的情况 示例演示了如何传递数组数据并在子组件中渲染 文章通过具体代码示例展示了props的声明、传递和使用过程，强调了类
2025-11-17 11:26:21
402
原创 简单介绍TS中的接口、泛型、自定义类型
TypeScript核心特性摘要： 接口(Interface)：用于定义对象结构，支持可选属性(?)、只读属性(readonly)，并能定义函数/类类型及接口继承 泛型(Generics)：创建可重用组件，如Array<T>指定数组元素类型，支持函数/接口/类的类型延迟指定 类型别名(Type)：为现有类型创建新名称，可应用于基本类型/联合类型/元组等，如type persons = PersonOne[] 特点：接口支持多重继承，泛型可约束和设默认类型，类型别名支持联合(&)和交叉(|
2025-11-16 20:34:31
315
原创 标签的ref属性
Vue3中ref属性的使用详解：用于获取DOM元素或组件实例的引用。基础用法包括在DOM元素上添加ref属性并通过ref()函数获取引用，相比document.getElementById更安全。在组件标签上使用ref可获取组件实例，但需配合defineExpose暴露数据。文章通过代码示例演示了两种场景，并解释了scoped样式导致的data-v属性现象。ref属性机制确保了引用的局部性，避免全局冲突问题。
2025-11-15 19:17:30
409
原创 watchEffect
本文介绍了Vue 3中watchEffect的基本用法及适用场景。通过一个购物价格提醒的示例，对比了watch和watchEffect的实现方式，展示了watchEffect自动追踪响应式依赖、立即执行且代码简洁的特点。watchEffect特别适用于依赖关系复杂、需要立即执行副作用、追求代码简洁或依赖自动变化的场景，如表单数据实时保存等需求。相比手动指定依赖的watch，watchEffect能更智能地自动监测所有被使用的响应式数据变化。
2025-11-14 20:15:07
258
原创 Watch监视多个数据源
摘要：Vue中使用watch监视多个数据源 watch可以同时监听多个数据源的变化。语法是将多个数据源放入数组作为第一个参数，回调中的newValue和oldValue也是数组形式。示例中监视了ItShare.name和ItShare.title.t1，当其中任一数据变化时都会触发回调。修改整个标题对象时，由于title.t1变化也会被捕获。这种监听方式适用于需要同时响应多个数据变化的场景。
2025-11-13 09:34:48
195
原创 watch监视特定属性
本文介绍了如何使用Vue的watch功能监视reactive对象中的特定属性。主要内容包括： 使用getter函数监视基本类型属性（如name） 直接监视对象类型属性（如title）的问题与局限性 使用getter函数+深度监视(deep:true)监视对象类型属性 对比了不同监视方式的区别和适用场景 最佳实践建议：无论监视基本类型还是对象类型属性，都建议使用getter函数形式，对于对象类型属性需要配合deep选项开启深度监视。
2025-11-12 20:36:20
337
原创 watch监视reactive对象类型数据
摘要：本文探讨了watch监视reactive对象类型数据的特点。通过代码示例展示了reactive定义的对象的监视行为：默认开启且无法关闭深度监视，能捕获对象属性及对象本身的变更。与ref不同，reactive强制深度监听以确保嵌套属性变化都能被捕获，即使设置{deep:false}也无效。当修改对象属性时，新值和旧值相同，因为它们引用同一对象。
2025-11-11 20:58:18
188
原创 watch监视-ref对象类型数据
本文讲解了如何用Vue的watch监视ref对象类型数据。默认情况下，watch只能监听对象引用变化，无法监听内部属性变化。通过设置deep:true可开启深度监听，但无法获取内部属性旧值。添加immediate:true参数可立即执行监听，获取初始值。文章通过示例代码演示了这三种情况的区别，并指出实际开发中通常不关心旧值的情况。
2025-11-10 10:58:54
369
原创 watch监视-ref基本类型数据
本文介绍了Vue3中watch的基本用法，用于监听ref定义的基本数据类型变化。通过计数器示例，展示了如何监视数据变化并在值变化时执行回调函数。文章详细说明了watch的引入方式、基础语法和停止监听的方法，当计数值达到10时通过watchStop()停止监听。watch适用于需要响应数据变化并执行特定副作用的场景，如用户修改昵称后需要进行的一系列操作。
2025-11-09 20:31:22
197
原创 computed计算属性
Vue.js中computed计算属性的使用摘要：本文介绍了Vue.js中computed计算属性的基本用法。首先通过v-model实现姓和名的双向绑定，然后展示了如何用字符串拼接显示全名。重点讲解了computed计算属性的实现方式：默认只读的计算函数和可读写的getter/setter形式。计算属性能简化模板代码、自动缓存结果（依赖变化时才重新计算），并能通过getter/setter实现双向绑定。最后通过示例演示了如何修改fullName来同时更新firstName和lastName。计算属性是处理复
2025-11-08 21:44:03
397
原创 toRefs和toRef
本文介绍了Vue3中的toRefs和toRef方法。当解构响应式对象时，普通解构会失去响应式，因为解构的是值而非引用。toRefs可以将响应式对象转换为ref对象集合，保持响应式连接，通过getter/setter实现双向同步。toRef则用于为响应式对象的单个属性创建ref引用。这两种方法都能在解构时保持数据的响应式特性，确保视图的自动更新。
2025-11-07 14:51:04
566
原创 ref对比reactive
Vue响应式对比：ref vs reactive 核心差异： ref适用于所有数据类型，通过.value访问；reactive仅用于对象类型 重新赋值时： reactive直接赋值会失去响应式（需用Object.assign保持） ref赋值始终保持响应式 原理区别： reactive基于Proxy代理整个对象 ref通过value属性包装值，任何修改都会触发响应 使用建议： 基本类型必须用ref 需要整体替换对象时推荐ref 复杂关联对象场景适合reactive 官方推荐ref作为主要API
2025-11-06 20:51:41
444
原创 ref创建对象类型的响应式数据
本文介绍了如何使用Vue的ref创建对象类型的响应式数据，并与reactive进行对比。示例展示了通过ref定义用户对象和待办事项数组，并通过.value访问和修改响应式数据。分析指出ref能处理基本类型和对象类型的原因：基本类型被包装为{value:...}对象，对象类型则内部调用reactive处理。reactive只能代理对象类型，使用Proxy实现，而基本类型直接返回原始值。文章总结了两种API的设计差异和适用场景。
2025-11-05 21:02:41
329
原创 reactive创建对象类型的响应式数据
Vue 3 的 reactive() 函数用于创建对象类型的响应式数据。通过引入 reactive，可以轻松创建包含嵌套对象和数组的响应式数据，修改时会自动更新视图。演示了如何创建响应式对象/数组，通过按钮修改数据验证响应式，以及处理多层嵌套对象。与 ref() 不同，reactive() 专门用于对象类型数据，其内部深层嵌套属性也都是响应式的，使得复杂数据结构的管理更加方便。
2025-11-04 09:10:47
220
原创 ref创建基本类型的响应式数据
本文简要介绍了Vue3中使用ref创建响应式数据的基本方法。主要内容包括： 演示了在setup语法糖中使用ref定义响应式变量 解释了为什么修改ref数据需要通过.value属性访问 说明了ref返回的是一个包含value属性的响应式对象 提到模板中会自动解包.value，而JS代码中需要显式使用.value 简要提到了ref数据在某些情况下可能丢失响应式特性 文章通过代码示例展示了ref的基本用法和特性，适合初学者了解Vue3响应式系统的基础知识。
2025-11-03 10:08:20
242
原创 setup语法糖
摘要 Vue3的setup语法糖简化了组件开发，通过在script标签添加setup属性，可以： 省略setup()函数和return语句 自动导出变量和方法 组件无需注册即可使用 使用defineOptions定义组件名（需vue3.3+版本） 相比传统写法，setup语法糖让开发者更专注于核心逻辑，减少模板代码，提高开发效率。同时解决了组件名定义需要额外script标签的问题，使代码更简洁清晰。
2025-10-14 00:00:20
399
原创 setup与选项式API
Vue3中setup与选项式API的共存性分析 实验表明，setup语法可以与选项式API中的data、methods同时存在，但官方不建议混合使用。测试发现： data中可以读取到setup中的数据，说明setup优先于data加载 setup无法读取data中的数据 命名冲突时setup数据会被data覆盖 修改setup数据需使用.value保持响应式 结论：Vue3为向前兼容允许两者共存，但实际开发应避免混用，推荐统一使用组合式API以获得更好的开发体验和代码组织。
2025-10-12 21:46:28
315
原创 Setup概述
Vue3中的setup是组合式API的入口函数，用于定义组件的数据和方法。通过setup可以定义变量和函数，并使用return暴露给模板。初始数据需使用ref()包裹才能实现响应式更新，修改时需通过.value属性访问。示例展示了如何将选项式代码转换为组合式写法，包括定义响应式变量name、age和tel，以及对应的修改方法。setup简化了代码组织，但需注意响应式变量的特殊处理方式。
2025-09-26 17:57:04
284
原创 Vue编写App组件
本文介绍了Vue项目中的src目录结构及组件编写方法。重点分析了index.html入口文件、main.ts应用初始化文件以及App.vue根组件的构成。文章说明了如何通过createApp创建Vue应用实例，并将其挂载到DOM元素上。同时演示了如何从零开始手动创建Vue应用的三个核心部分：template模板、script逻辑和style样式。通过一个简单的"Hello Vue"示例，展示了组件的基本编写方式和组件命名规范。最后展示了运行效果，验证了自定义组件的正确性。
2025-08-27 08:55:17
342
原创 创建Vue工程
Vue3项目创建指南 使用Vite创建Vue3工程的简明步骤： 运行npm create vue@latest命令 输入项目名称(如vue3_demo) 仅选择TypeScript功能 跳过实验性特性 保留示例代码 完成后运行npm install安装依赖 项目主要目录说明： public：存放静态文件 src：源代码目录 env.d.ts：TypeScript声明文件 index.html：应用入口文件 vite.config.ts：Vite配置文件
2025-08-26 16:44:57
872
原创 了解事件绑定v-on
本文介绍了Vue.js中的事件绑定机制，通过v-on指令可以轻松实现DOM事件监听。示例演示了一个简单计数器功能，使用v-on:click绑定按钮点击事件，直接操作数据属性counter实现增减功能，无需像原生JS那样手动添加事件监听器。代码展示了Vue的响应式特性，当counter值改变时，视图会自动更新。这种简洁的语法体现了Vue在简化DOM操作方面的优势，使开发者能更专注于业务逻辑而非事件处理细节。
2025-07-05 22:13:15
337
原创 关于数据绑定的练习
本文介绍了如何使用Vue.js完成一个简单的数据绑定练习。主要内容包括：1)使用插值语法显示姓名和年龄；2)在模板中进行简单运算计算五年后的年龄；3)生成随机数；4)使用v-bind绑定图片URL；5)预填充输入框的值。文章通过具体代码示例，展示了Vue.js的基本数据绑定功能，包括直接使用插值语法、定义方法以及属性绑定等技术。最后提到后续将学习事件绑定的相关知识，为Vue.js的进一步学习奠定基础。
2025-07-04 19:47:09
467
原创 Vue如何处理数据、v-HTML的使用及总结
本文介绍了Vue处理数据的方式和v-HTML的使用方法。Vue通过数据代理将data()返回的对象属性绑定到实例上，并自动绑定methods中的this指向。v-HTML指令可用于输出原始HTML内容，但会绕过Vue内置的XSS防护，需谨慎使用可信内容。文章还总结了第一部分学习要点，包括Vue实例创建、挂载、指令使用和数据绑定等核心概念。
2025-07-03 22:22:13
569
RCLD-0114 RG-JCOS云管理平台产品日常维护和问题排查(含UDS硬件组件).pptx
2021-04-19
RG-AP系列无线接入点AP_RGOS11.1(5)B9版本Web管理手册(V2.0).pdf
2021-04-14
RCLD-0113 RG-JCOS云管理平台产品常用功能配置(含UDS硬件组件).pptx
2021-04-19
SANGFOR_AC&amp;SG_v6.0_2015年度渠道初级认证培训13_系统诊断工具_上网故障排除丢包模块.xls
2021-04-01
LSI 2308 mpt_SAS2_Windows7_Windows_Server_2008_R2_P20.zip
2021-04-19
CentOs7一直转圈桌面进不去
2023-05-26
TA创建的收藏夹 TA关注的收藏夹
TA关注的人