- 博客(118)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 vue的实用且常用的各种api
本文总结了Vue.js开发中的核心API使用指南，包括：1）实例配置方法如关闭日志、调试工具设置；2）组件获取方式如$root、$parent等；3）响应式数据操作$set/$delete；4）生命周期钩子函数；5）自定义事件处理$emit/$on；6）路由相关操作；7）其他实用API如混入、指令、过滤器等。全文以代码示例为主，系统梳理了Vue开发中的关键知识点，适合作为速查手册使用。
2025-06-12 10:34:34
855
原创 深入解析vue的transition过渡动画使用和优化
本文详细介绍了Vue内置的<transition>组件，该组件用于实现元素进入/离开DOM时的过渡效果。主要内容包括：1) 基础属性配置（name、mode、duration等）；2) 过渡事件钩子；3) 实现原理（通过添加/移除类名触发CSS过渡）；4) 常见应用场景（列表、模态框等）；5) 实用技巧（自定义过渡类和JavaScript钩子）；6) 性能优化建议（优先使用transform/opacity）。文章还提供了代码示例和注意事项，帮助开发者更好地使用该组件实现平滑的过渡效果。
2025-06-11 11:20:27
1195
原创 vue过滤器filter的详解及和computed的区别
本文详细介绍了Vue过滤器(filter)的使用方法，包括局部过滤器和全局过滤器的定义与注册，以及如何传递参数和串联使用过滤器。过滤器主要用于文本格式化或数组数据处理，不改变原始数据，通过管道符(|)调用。文章还对比了filter与computed的区别，并列举了常见的使用场景如状态转换、数字/日期格式化等。最后提供了作者往期技术文章的链接，涵盖Vue、Flutter、CSS等多个前端开发领域的技术分享。
2025-06-10 09:41:39
622
原创 深入解析vue的keep-alive缓存机制
Vue的keep-alive组件是一个内置的抽象缓存容器，能够保留包裹组件的状态，避免重复渲染。它通过activated和deactivated钩子管理组件生命周期，支持include/exclude属性精准控制缓存范围，以及max属性限制缓存数量。常见应用场景包括路由状态持久化和动态组件切换。底层通过cache对象存储组件实例，采用LRU策略淘汰缓存。最佳实践包括结合路由元信息动态管理缓存、避免过度缓存以及在activated钩子处理数据刷新。注意需为组件设置name属性，且缓存组件不会触发mounted
2025-06-09 10:03:40
968
原创 前端项目eslint配置选项详细解析
ESLint是一个可配置的JavaScript代码检查工具，主要用于发现和修复代码问题。其核心功能包括静态代码分析、自动修复和可配置规则，能帮助统一代码规范，提高可维护性。错误级别分为关闭(0)、警告(1)和错误(2)。常用规则涵盖逻辑错误预防、最佳实践、变量声明、CommonJS和代码风格等方面，如禁止console使用、强制===操作符、变量命名规范等。这些规则可通过配置文件灵活调整，适合团队协作和CI/CD集成，有效提升代码质量。
2025-06-06 10:26:56
304
原创 vue中ref的详解以及react的ref对比
Vue中的ref详解：用法、特性与最佳实践 ref是Vue中用于获取DOM元素或组件实例的特殊属性，通过$refs对象访问。文章详细介绍了ref的基本用法、非响应式特性、延迟更新特点，以及在DOM操作、组件通信中的使用场景。特别强调了在v-for循环、函数式组件和组合式API中的特殊用法，并与React的ref机制进行了对比比较。文章还提供了动态ref管理和$nextTick等实用技巧，最后总结了ref的最佳使用实践，即优先采用数据绑定，仅在必要场景下使用ref进行直接操作。
2025-06-05 10:10:22
673
原创 vue异步更新nextTick的详解
nextTick是Vue中用于在DOM更新后执行回调的API，其语法支持回调函数和Promise两种形式。主要使用场景包括：数据变化后获取最新DOM、在created生命周期操作DOM等。其实现原理基于JS事件循环机制，Vue会将回调函数推入队列，根据环境优先选择微任务（如Promise.then）执行。通过异步更新策略，Vue优化了DOM更新性能，确保在数据变化后能准确获取更新后的DOM结构。文章还通过实例展示了如何利用nextTick获取动态生成的DOM节点。
2025-06-04 09:49:25
967
原创 vue混入mixins详解和生命周期影响
Vue.js中的mixins（混入）是一种提高代码复用的重要机制。本文介绍了mixins的基本概念和使用场景，包括局部混入和全局混入的实现方法，并演示了如何定义和使用混入对象。同时详细讲解了混入后组件生命周期的执行顺序，指出当混入与组件存在同名方法时，组件的方法会覆盖混入的方法。文章还提供了代码示例展示混入对象与组件的合并过程，帮助开发者理解如何利用mixins来减少重复代码并扩展组件功能。
2025-06-03 09:56:09
759
原创 vue的监听属性watch的详解
watch 是一个对象，键是需要观察的表达式，用于观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数的参数是新值和旧值。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。
2025-05-30 09:08:25
951
原创 vue计算属性computed的详解
计算属性必须返回一个值，值的结果会被缓存，除非依赖的响应式 property 变化才会重新计算，如果某个依赖在该实例范畴之外，则计算属性是不会被更新的。
2025-05-29 10:11:45
1208
原创 vue的内置指令和自定义指令详解
Vue.js指令是带有v-前缀的特殊特性，用于响应式地操作DOM。内置指令分为四类：内容渲染指令，条件渲染指令，属性绑定指令.....
2025-05-28 10:16:26
612
原创 vue生命周期执行顺序及父子组件关系详解
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期，每个生命周期都是一个函数。
2025-05-27 09:36:32
890
原创 前端各种插件模版与工具归纳分享
本文涵盖了 UI 组件库、js 处理工具库、css 引擎 / 动画库、界面交互 / 可视化库、音视频处理库、Canvas 和图像处理库、Word/PDF/Excel 文档处理库、富文本编辑器、vue 插件、React 插件以及其他相关前端资源的介绍。
2025-05-26 09:00:00
1110
原创 使用useMemo优化React应用性能
React 应用开发中，性能优化是关键，而 useMemo 钩子是一个强大的工具，用于减少不必要的计算和渲染。
2025-05-23 09:00:00
620
原创 Web前端页面开发阿拉伯语种适配指南
前端多语言国际化是开发中不可或缺的一环。阿拉伯语、希伯来语等语言采用从右向左的书写方向，这意味着文本排版、元素布局等都需要进行相应调整。不仅要考虑文本的显示方向，还需对按钮、导航栏、表单等各类 UI 元素的布局进行重新规划，这给开发带来了独特的挑战（折磨）。本文将深入探讨前端开发中阿拉伯语种的适配技术，包括如何适配，全局和局部的修改，绝对定位的替换，兼容性以及替代方案等等。
2025-05-22 09:00:00
987
原创 使用natapp进行内网穿透和预览本地页面
在网页开发过程中，有时我们需要将本地的页面进行预览。但是本地webpack或者vite开发的项目运行的localhost页面，别人的外网无法直接通过浏览器访问，这时我们可以使用natapp进行内网穿透和预览本地页面。
2025-05-20 09:01:47
635
原创 js中eval的用法风险与替代方案全面解析
JavaScript 中的eval函数能够动态执行字符串代码，动态执行 JSON 字符串、低代码平台中的规则校验的全面解析。
2025-05-19 09:38:55
690
原创 纯js使用StackBlur实现图片模糊和压缩
本文详细介绍了如何在现代Web项目中实现纯前端的图片模糊与压缩功能。通过使用StackBlur库，结合Canvas的绘图能力，开发者可以在前端高效地完成图片处理。
2025-05-12 09:00:00
548
原创 css使用aspect-ratio制作4:3和9:16和1:1等等比例布局
在网页制作过程中，有时候我们只知道宽度，或者只知道高度，这时候需要制作一个4:3和9:16这种类似的盒子，不使用js而使用纯css如何实现呢
2025-05-05 11:33:03
1470
原创 js使用History.replaceState实现不刷新修改浏览器url
History.replaceState()是一个非常实用的方法，它为 Web 开发者提供了更灵活的历史记录管理方式。通过无刷新更新 URL 和关联状态数据，能够极大地提升单页应用的用户体验
2025-04-28 09:23:02
1019
原创 js使用IntersectionObserver实现目标元素可见度的交互
IntersectionObserver 是浏览器原生提供的一个Api。可以"观察"我们的元素是否可见，原理是判断目标元素与可见区域的交叉比例，所以也被称为"交叉观察器"。本文通过一个Demo代码，讲解如何使用IntersectionObserver，来实现根据目标元素可见度的交互效果。并附有兼容性，使用场景，完整代码实现，以及成熟的Hooks推荐。
2025-04-21 09:13:26
751
原创 flutter-Text等组件出现双层黄色下划线的问题
这天我正在写Flutter项目的页面功能，突然发现我的 Text 文字出现了奇怪的样式，具体如下：文字下面出现了双层黄色下划线，文字的空格变得很大，文字的间距也变得很大
2025-04-14 09:20:40
646
原创 React数据更新了useState列表视图没更新的问题解决
实际开发过程中因 useState 特性导致回调函数内列表数据非最新、导致列表更新异常的问题，结合 useRef 存储最新数据来做处理。
2025-04-07 10:15:28
723
原创 flutter-使用EventBus实现组件间数据通信
如何在 Flutter 中利用事件总线实现父子组件之间的通信。父组件通过触发事件并携带相关数据，子组件通过订阅事件总线并根据接收到的事件数据更新自身状态和 UI。
2025-03-31 12:27:00
882
原创 flutter-实现瀑布流布局及下拉刷新上拉加载更多
在 Flutter 中实现了一个带有瀑布流布局、下拉刷新和上拉加载更多功能的页面。从引入必要的库，到定义组件、管理状态以及构建复杂的 UI 结构，每一步都紧密配合。
2025-03-24 09:44:35
1662
原创 flutter-实现Tabs吸顶的PageView效果
通过这段代码，我们成功地在 Flutter 中实现了一个具有吸顶 Tabs 的 PageView 效果。从引入必要的库，到定义组件和管理状态，再到构建具体的 UI 部件，每一步都紧密配合
2025-03-17 10:30:20
1376
原创 flutter-制作可缩放底部弹出抽屉评论区效果
本文将详细介绍如何使用 Flutter 实现一个可缩放的底部弹出抽屉效果，用户点击特定区域后会弹出底部抽屉，抽屉的高度可以通过手指滑动进行调整。当手指滑动距离超过一定阈值时，抽屉会关闭；否则，抽屉会恢复到初始高度。
2025-03-10 11:13:46
1237
原创 flutter-滚动监听NotificationListener
NotificationListener是flutter的通知监听器，当需要对滚动组件进行监听时。
2025-02-17 11:22:43
1129
原创 flutter-使用extended_image操作图片的加载和状态处理以及缓存和下载
在 Flutter 的开发过程中，经常会遇到图片的显示和加载处理，通常显示一个图片，都有很多细节需要处理，比如图片的加载、缓存、错误处理、图片的压缩、图片的格式转换等，如果每个地方都手动处理，就太麻烦了，这时候就
2023-12-29 11:40:26
3237
5
原创 flutter-使用GestureDetector识别手势事件
在 flutter 中，GestureDetector 是手势识别的组件，可以识别点击、双击、长按、拖动、缩放等手势事件，并且可以与子组件进行交互，构造函数属性如下
2023-12-28 13:55:36
3084
原创 flutter-使用permission_handler进行系统权限的申请和操作
在大多数操作系统上，权限不是在安装时才授予应用程序的。相反，开发人员必须在应用程序运行时请求用户的许可。
2023-12-28 10:27:27
11028
1
原创 flutter学习-day20-使用SafeArea组件处理各机型的安全距离
安全区域，指的是移动端设备的可视窗口范围。处于安全区域的内容不受圆角、刘海屏、iPhone 小黑条、状态栏等的影响，也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内
2023-12-26 10:02:11
2245
1
原创 flutter学习-day19-国际化支持
默认情况下，Flutter SDK中的组件仅提供美国英语本地化资源（主要是文本）。要添加对其他语言的支持，应用程序须添加一个名为“flutter_localizations”的包依赖，然后还需要在MaterialApp中进行一些配置。
2023-12-25 11:20:46
1731
原创 flutter学习-day18-网络请求
Dart IO库中提供了用于发起Http请求的一些类，我们可以直接使用HttpClient来发起请求。
2023-12-22 10:59:40
1120
原创 flutter学习-day17-文件操作
Dart的 IO 库包含了文件读写的相关类，它属于 Dart 语法标准的一部分，所以通过 Dart IO 库，无论是 Dart VM 下的脚本还是 Flutter，都是通过 Dart IO 库来操作文件的，不过和 Dart VM 相比，Flutter 有一个重要差异是文件系统路径不同
2023-12-21 15:47:39
965
原创 flutter学习-day16-自定义组件
当Flutter提供的现有组件无法满足我们的需求，或者我们为了共享代码需要封装一些通用组件，这时我们就需要自定义组件。在Flutter中自定义组件有三种方式：通过组合其他组件、自绘和实现RenderObject
2023-12-20 10:35:10
1432
原创 day15-动画和路由过渡和切换
在任何系统的UI框架中，动画实现的原理都是相同的，即：在一段时间内，快速地多次改变UI外观；由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画。我们将UI的一次改变称为一个动画帧，对应一次屏幕刷新
2023-12-19 11:06:54
869
js前端浏览器打开本地exe程序的demo
2020-10-16
前端层级拖拽文件夹组件（Vue3+elementPlus的Tree组件实现）
2024-01-05
js前端Web Woeker和Shared Worker使用案例demo
2023-11-02
js前端jsPlumb插件使用案例demo（流程图效果）
2019-10-20
js前端实现的组合快捷键demo（类似QQ截图快捷键等）
2020-09-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人