- 博客(170)
- 收藏
- 关注
RSS订阅原创 HarmonyOS：@State 装饰器——组件内状态
详细介绍了ArkTS中的@State装饰器特性。该装饰器用于声明组件内部具有响应式特性的状态变量，当其值变化时自动触发UI更新。
2025-11-13 18:52:07
988
原创 HarmonyOS:ArkTS 页导航
本文介绍了HarmonyOS中ArkTS开发的页面导航功能。主要内容包括：1）通过router模块实现页面跳转（pushUrl）和返回（back）；2）使用Navigation组件作为基础布局；3）页面栈的后进先出（LIFO）工作机制；4）参数传递方式（params）及获取方法（getParams）。通过MainPage到DetailPage的示例展示具体实现，并列举了常见操作对照表和注意事项。文章强调避免频繁跳转相同页面、推荐使用相对路径等开发规范，帮助开发者掌握基于页面栈的导航实现技巧。
2025-11-12 22:11:15
274
原创 HarmonyOS：Navigation 和 NavDestination 组件详解
HarmonyOS导航系统采用声明式UI+集中式路由架构，核心组件包括Navigation容器、NavPathStack控制器和NavDestination页面容器。系统提供Auto/Stack/Split三种导航模式，支持动态切换和设备自适应。通过pathStack.pushPath()实现路由跳转，router_map.json配置路由映射。关键点：需在NavDestination的onReady中绑定导航栈，参数通过pushPath传递，Split模式需左侧为NavDestination组件。
2025-11-11 14:30:29
426
原创 HarmonyOS:Tabs组件
Tabs组件提供了灵活的多视图管理方案，支持顶部、底部和侧边导航布局。核心功能包括：1）通过tabBar和TabContent实现导航与内容联动；2）提供固定/滚动两种导航模式；3）支持自定义页签样式和交互控制；4）具备缓存管理和切换拦截机制。
2025-11-10 20:38:00
373
原创 HarmonyOS:ArkUI栅格布局系统(GridRow/GridCol)
本文介绍响应式栅格布局系统，包含GridRow和GridCol两个核心组件。GridRow定义容器属性，包括断点配置、列数和间距；GridCol控制子项布局，支持跨列、偏移和排序。系统提供6种默认断点（xs-xxl），支持自定义断点阈值，可根据窗口尺寸自动调整布局。典型应用场景包括电商网格、数据仪表盘等，建议采用移动优先策略，使用可整除数列，并避免过度嵌套。调试时可添加边框或监听断点变化，但不适用于需要精确动画控制的场景。
2025-11-10 20:29:30
387
原创 HarmonyOS:相对布局（RelativeContainer）
RelativeContainer是一种高效布局组件，通过"锚点+对齐规则"实现灵活定位，适用于复杂界面设计。核心特性包括：1）基于ID的锚点对齐规则，支持水平和垂直方向定位；2）三种链式布局模式（SPREAD/SPREAD_INSIDE/PACKED）实现自动间距分配；3）辅助线(Guideline)和屏障(Barrier)实现统一对齐和动态边界控制。
2025-11-10 20:23:04
1104
原创 HarmonyOS:弹性布局（Flex）
本文介绍了弹性布局(Flex)的核心概念与应用。主要内容包括：弹性布局的基本概念(主轴与交叉轴)、布局方向设置(direction)、换行方式(wrap)、主轴(justifyContent)和交叉轴(alignItems)对齐方式、多行对齐(alignContent)、以及自适应拉伸属性(flexBasis/flexGrow/flexShrink)。
2025-11-10 20:15:29
1062
原创 HarmonyOS:层叠布局（Stack）
StackLayout是一种容器组件，支持子元素层叠显示，后添加元素默认覆盖前者。文档详细介绍了Stack的三大核心特性：1）alignContent参数支持九宫格对齐方式；2）zIndex层级控制可调整显示顺序；3）默认按插入顺序堆叠。通过应用图标+底部导航栏的实例演示了实际应用，并给出性能优化建议：避免过度嵌套，优先使用样式属性替代容器。适用于卡片叠加、悬浮按钮等需要多层元素堆叠的场景。
2025-11-10 20:05:21
603
原创 HarmonyOS:线性布局（Row/Column）
线性布局（Row/Column）是UI开发的核心布局方式，通过主轴（排列方向）和交叉轴（垂直方向）实现元素有序排列。
2025-11-10 19:57:06
1102
原创 时序图 —— 讲清“对象之间怎么互动”
文章摘要：时序图用于展示系统内部对象间的交互时序，如"用户支付"场景。核心要素包括对象（矩形框）、生命线（竖虚线）、激活条（竖矩形）和消息（带箭头实/虚线）。绘制步骤：1)确定交互对象；2)按时间顺序从上到下绘制消息传递，如订单服务先后与数据库、支付网关交互；3)注意同步/异步消息及返回消息的标注。关键原则：严格按时间顺序绘制，确保消息传递完整。常见错误包括时序错乱和遗漏返回消息。
2025-10-26 21:42:37
227
原创 业务流程图 —— 讲清“谁做了什么事”
摘要：业务流程图通过"先...然后..."的步骤序列展示业务流程，聚焦流程和参与角色。核心要素包括角色（👤）、操作（▢）、流程线（→）、判断（◇）和起止点（╭╮）。以点外卖为例，涉及顾客、系统、商家和骑手等角色，从打开APP到收货的完整流程。关键要遵循"一图一事，角色明确，有始有终"原则，避免多流程混杂。（98字）
2025-10-26 21:33:33
170
原创 亲爱的1024,我的节日，我的序章：
直到在团队协作中，因为一个分号的位置与队友激烈讨论——我才渐渐明白，代码不只是代码。它让我明白，最优雅的代码往往是最简单的实现，最精彩的人生或许也是专注于热爱之事的平凡日子。那时我以为编程是严谨的语法，是冰冷的逻辑，是一行行能够正确运行的代码。”如今，我即将从代码的学习者，变成价值的创造者。愿我们所有即将毕业的程序员：保持编译时的严谨，拥有运行时的流畅，在人生的版本迭代中，不断写出更优雅的代码。明天，当我穿上那件经典的“格子衬衫”，走进第一间办公室，在入职表上写下“职业：软件工程师”时，我知道——
2025-10-24 11:02:25
296
原创 Vue Router 路由懒加载与代码分割详解
VueRouter路由懒加载机制详解：通过动态import()实现按需加载，提升应用性能。文章对比了静态导入与懒加载的区别，详细说明Webpack的命名Chunk（使用webpackChunkName注释）和Vite的手动分块配置（rollupOptions）实现组件分组打包的方法。最佳实践建议所有路由组件使用懒加载，并避免重复使用异步组件。包含实际项目结构示例和性能优化策略，帮助开发者合理组织代码分割，减少首屏加载时间。
2025-10-16 19:43:56
1226
原创 Vue Router 导航守卫
VueRouter导航守卫完整指南 本文系统讲解了VueRouter的导航守卫机制，包括： 五大守卫类型：全局前置/解析/后置守卫、路由独享守卫、组件内守卫 执行顺序：完整解析从触发到完成的12步流程 核心应用场景：权限控制、数据预取、表单保护、埋点统计等 最佳实践：合理使用meta字段、避免性能陷阱、组合式API用法 注意事项：异步解析机制、this访问限制、防止重定向循环等 导航守卫是实现前端路由控制的核心工具，掌握其特性可构建更安全高效的应用。
2025-10-13 22:54:58
691
原创 Vue Router 的三种历史模式详解
Vue Router提供三种历史模式： Hash模式：使用URL#部分，兼容性好但SEO不友好 HTML5模式：美观URL需要服务器回退配置（所有请求指向index.html） Memory模式：不依赖URL，适合SSR/测试环境 选择建议： 生产环境优先HTML5模式 无后端支持用Hash模式 SSR/测试用Memory模式 ⚠️注意：HTML5模式需配置404页面路由和服务器重定向
2025-10-13 22:45:45
982
原创 学习笔记：Vue Router 中的链接匹配机制与样式控制
Vue路由链接高亮机制解析：本文详细介绍了Vue Router中<RouterLink>组件的路由匹配机制及类名添加规则。关键点包括：1)路由匹配基于path和params，忽略query和hash；2)router-link-active与router-link-exact-active类名的区别（前者包含祖先路由，后者仅精确匹配）；3)提供组件级和全局两种自定义类名方法；4)通过实际案例演示导航菜单和面包屑的应用场景。建议开发时合理利用这两个类名的差异，结合语义化命名规范。
2025-10-13 22:36:14
857
原创 学习笔记：Vue Router 路由匹配语法详解
VueRouter路径匹配详解：支持动态参数、正则约束、可重复段和可选参数等高级语法。通过:param(regex)定义参数格式，使用+、*、?控制参数数量，结合sensitive和strict选项实现精确匹配。适用于电商分类、多级导航等场景，配合调试工具可快速定位匹配问题。掌握这些技巧能精准控制应用导航逻辑，提升项目可维护性。
2025-10-10 20:34:57
729
原创 学习笔记：Vue Router 编程式导航详解
Vue.js编程式导航提供了三种核心方法：router.push()用于常规跳转并添加历史记录；router.replace()实现无痕跳转，替换当前记录；router.go()控制历史栈前进后退。参数传递推荐使用命名路由+params组合，避免path与params混用导致参数丢失。组件中可通过this.$router（选项式API）或useRouter()（组合式API）访问路由实例。该方法支持Promise处理导航结果，适用于需要动态控制跳转路径、权限验证等场景，比声明式导航更灵活。
2025-09-26 19:19:46
990
原创 Vue Router 命名路由学习笔记
命名路由是通过为路由规则添加唯一名称标识符实现的技术，核心是使用name属性替代硬编码URL。主要特点包括：1）实现路径与业务逻辑解耦；2）自动处理动态参数；3）支持编译器检查。使用方式分模板中router-link和编程式导航两种。优势在于路径变更不影响代码、自动参数处理、精确匹配。需注意命名唯一性、参数完整性和正确传递方式。典型应用场景包括用户管理系统的列表、详情、编辑等路由配置。最佳实践建议规范命名、参数验证和错误处理。
2025-09-26 19:10:54
385
原创 学习笔记：Vue Router 中的嵌套路由详解[特殊字符]概述
VueRouter嵌套路由核心要点： 实现原理：通过children字段定义嵌套路由，配合多层<router-view>动态渲染组件，形成树状结构。
2025-09-26 18:59:39
1242
原创 Vue 3 组合式 API 生命周期钩子学习笔记
Vue3生命周期钩子函数详解 本文系统介绍了Vue3组合式API中的生命周期钩子函数，重点解析了各钩子的执行时机、使用场景和注意事项。
2025-09-25 18:51:45
1185
原创 Pinia 核心概念详解：Store, State, Getter, Action
Pinia核心概念摘要：Store作为状态容器管理State(响应式数据)、Getter(缓存计算值)和Action(业务逻辑)。State通过$patch批量修改，Getter自动缓存派生状态，Action支持异步操作。特性包括完整TS支持、模块化设计和简化操作流程，相比Vuex取消了mutations。示例展示了组件内直接使用Store的状态、计算属性和方法。
2025-09-25 18:39:06
339
原创 Vue : defineModel()
Vue3.4引入的defineModel()宏简化了组件双向绑定实现，取代了手动props+emit的繁琐方式。它支持多字段绑定（v-model:field）、默认值设置和修饰符处理。编译时会自动转换为传统模式，本质上仍是基于prop+emit机制。使用需注意：避免默认值导致父子状态不同步，合理处理修饰符，优先用于3.4+版本。该特性提高了表单组件的开发效率和可维护性，是Vue组件通信的重要优化。
2025-09-18 19:30:12
982
原创 Vue3 中 props 与 $emit 的使用及 defineProps 与 defineEmits 的区别详解
Vue父子组件通信摘要 Vue父子组件通信遵循单向数据流原则，父组件通过props传递数据给子组件，子组件通过$emit触发事件反馈给父组件。Vue3提供了两种写法：传统Options API（使用props和$emit）和Composition API的<script setup>语法糖（使用defineProps和defineEmits宏函数）。新版写法更简洁，且支持TypeScript类型安全。需要注意：不能解构props，宏函数必须在顶层调用。
2025-09-18 19:08:06
879
原创 Vue: 组件事件
本文详细介绍了Vue组件间通过自定义事件实现通信的方法。主要内容包括：使用$emit触发事件、父组件通过v-on监听事件、参数传递、事件命名格式转换等。重点讲解了defineEmits()的三种声明方式（数组、对象、TypeScript类型），并提供了父子组件通信的完整示例代码。文档还强调了最佳实践：显式声明事件、使用kebab-case命名、推荐setup语法糖+TS类型标注，同时指出组件事件没有冒泡机制的特性。通过图表辅助理解事件通信流程和命名转换规则，帮助开发者掌握Vue组件事件通信的核心技术。
2025-09-17 18:51:42
1383
原创 Vue: 组件注册
Vue组件注册方式对比文章摘要：Vue组件注册分为全局和局部两种方式。全局注册通过app.component()实现，组件可在整个应用中使用，但会增加打包体积且依赖关系不明确，适合基础通用组件；局部注册在父组件中通过components选项实现，具有Tree-shaking优势且依赖清晰，适合业务组件。组件命名推荐使用PascalCase，DOM模板中需转为kebab-case。核心原则：优先局部注册，全局注册仅用于通用组件，保持命名规范以确保代码可维护性。
2025-09-16 19:00:17
838
原创 Vue: 组件基础
Vue组件是构建用户界面的独立可复用单元，通过单文件组件(.vue)或JavaScript对象定义。组件优势包括可复用性、可维护性和协作开发。组件通信通过Props实现父传子数据传递，通过自定义事件实现子传父通信。插槽(Slot)允许内容分发，动态组件可通过:is属性切换并用KeepAlive保持状态。DOM模板需注意大小写转换和闭合标签。组件化开发是构建大型Vue应用的核心，通过封装、复用和清晰的通信机制提高开发效率。
2025-09-16 18:46:45
268
原创 Vue: 模板引用 (Template Refs)
Vue模板引用机制解析 Vue提供模板引用(ref)功能，用于直接访问DOM元素或组件实例。在组合式API中，通过useTemplateRef获取引用，需注意引用仅在挂载后可用。引用可用于表单聚焦、组件通信等场景，组件实例需通过defineExpose显式暴露接口。v-for中引用返回数组，动态渲染需结合watch处理。最佳实践包括：优先声明式编程、注意访问时机、合理管理引用生命周期。模板引用为Vue提供了必要的命令式操作能力，建议在特定场景下谨慎使用。
2025-09-15 14:21:21
471
原创 Vue:后端服务代码解析
本文介绍了一个基于Express和MySQL的管理员系统后端API实现。代码使用Express框架搭建RESTful API，包含管理员数据的增删改查功能。通过MySQL2的Promise版本实现异步数据库操作，并采用连接池优化性能。API支持跨域请求，包含完整的错误处理和状态码返回机制。系统实现了管理员列表查询、创建、更新和删除等核心功能，使用参数化查询防止SQL注入，并通过affectedRows检查操作结果。服务器运行在3000端口，为前端提供数据交互接口。
2025-09-12 18:56:25
452
原创 Vue: 表单输入绑定
Vue的v-model指令实现了表单元素与JavaScript状态的双向绑定，大幅简化了表单处理。它根据不同表单元素（文本输入、复选框、单选按钮、选择器等）自动适配对应的属性和事件。v-model支持值绑定、修饰符（.lazy、.number、.trim）等特性，并能扩展到自定义组件。使用时应避免依赖HTML初始属性，对于复杂场景可结合手动绑定或自定义组件。v-model通过智能适配和简化绑定流程，有效提升了表单开发效率和数据管理质量。
2025-09-10 19:56:29
799
原创 Vue:事件处理机制详解
Vue.js通过v-on指令（简写@）提供灵活的事件处理机制，支持内联和方法两种处理器类型，并包含丰富的事件修饰符（如.stop/.prevent）、按键修饰符（.enter/.tab）和系统修饰符（.ctrl/.shift）。开发者可通过$event访问原生事件，使用修饰符链式组合实现精确控制。Vue的事件系统语法简洁，支持类型标注和性能优化，能高效处理用户交互逻辑，是构建响应式Web应用的核心功能。
2025-09-10 19:45:23
720
1
原创 Vue： 列表渲染 (v-for)
Vue.js的v-for指令详解：用于高效渲染列表数据，支持数组、对象和范围值遍历。关键点包括：1)基本语法和带索引遍历；2)对象遍历的三种方式；3)必须使用:key提高性能；4)避免与v-if混用；5)组件使用时需显式传参；6)变更数组的正确方法。最佳实践强调使用计算属性处理复杂逻辑，为每个项提供唯一key，并注意数组方法的副作用。
2025-09-10 19:09:22
668
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人