- 博客(23)
- 收藏
- 关注
原创 高精度计算库Decimal.js的使用方法
⚠️ 推荐传字符串,避免构造时就丢失精度。链式写法清晰、可读性高,适合复杂业务计算。金额计算(订单、找零、折扣)
2025-12-20 11:39:21
198
原创 ref和reactive的区别
ref定义:用来为基本数据类型(字符串、数字、布尔值等)创建响应式数据。返回值:一个对象,真实值存储在.value属性中。reactive定义:用来为对象类型(对象、数组、Map、Set 等)创建响应式数据。返回值:一个代理对象 Proxy,不需要.value。ref适合基本类型,取值需要.value。reactive适合对象类型,直接使用属性即可。如果需要整体替换对象,用ref包裹对象;如果只修改属性,用reactive更直观。二者可以配合使用,借助toRefs保持响应式解构。
2025-08-20 09:39:58
490
原创 react和vue对比
useCallback`主要用于缓存函数。但是有些情况下,我们希望函数在依赖项没有改变时保持不变,以避免不必要的子组件重新渲染。如果依赖项没有改变,就会返回之前缓存的计算结果,从而避免不必要的计算开销。React 中的监听属性:React 中通过useEffect实现监听,useEffect 的依赖数组用于指定监听的状态。Vue 提供computed来定义基于状态的衍生数据,具有缓存能力(除非依赖改变,否则不会重新计算)。Vue 中的监听属性:Vue 使用watch 来监听特定数据的变化,并触发回调。
2025-02-07 09:52:50
437
原创 选择器的使用
nth-last-of-type:选择父元素中倒数特定类型的第n个元素。nth-of-type:选择器选择父元素中某个特定类型的第n个元素。last-child:last-child选择父元素中的。nth-child:选择器用于选择父元素中的第。nth-last-child:选择父元素中的。有参数,选择特定类型的倒数第几个元素。没有参数,仅选择父元素最后一个子元素。有参数,选择特定类型的第几个玄素。有参数,可以选择倒数第n个元素。个子元素(不考虑元素类型)。有参数,选择第几个元素。
2025-01-07 10:15:31
262
原创 Vue 状态存储和会话存储同步清空问题解决方案
在使用 Pinia 定义的 useHeaderTabStore中,tab状态是通过会话存储(sessionStorage)初始化的。然而在退出登录时,即使清空了会话存储中的 tab数据,重新登录后页面上的 tab数据仍然存在,这是因为 Pinia 状态在内存中仍然保留了之前的数据,未重新获取会话存储的数据。此时再进行登录之后,tab数据任然存在页面上没有清空,但是浏览器存储已经被清空。此时可以想到状态存储的tab变量在登录之后未重新获取,而是保存之前的数据。
2024-12-12 10:16:09
580
1
原创 @click、@keyup 和 @keydown 事件的区别及使用场景
keyup 和@keydown 事件是 键盘事件,这些事件必须在能够接收键盘事件的元素上触发。通常,输入框、按钮、链接等元素是可以接收键盘事件的。例如,div 元素默认是 不可聚焦 的,但通过设置 tabindex="0",它可以变成可聚焦的,从而可以触发键盘事件。@keyup 事件会在用户释放键盘按键时触发,因此目标元素必须具有 焦点 才能接收到此事件。如果你希望通过键盘触发@keyup 或@keydown 事件,可以通过添加。来使元素获得焦点,确保它能够接收键盘事件。
2024-12-11 13:47:08
1389
原创 获取dom元素的方式
多个元素获取:getElementsByClassName、getElementsByTagName、querySelectorAll。单一元素获取:getElementById、querySelector。复杂选择器:querySelector支持所有css选择器。树状遍历:children、childNodes。动态属性访问:自定义属性、closest。4.通过选择器获取元素。5.通过属性获取元素。
2024-12-10 16:16:39
322
原创 文件的并发操作的处理Promise.all
在许多前端应用中,我们常常需要一次性上传多个文件。为了提升用户体验,采用并发上传的方式,允许多个文件同时上传,而不是一个接一个地上传。这不仅提高了文件上传的效率,也避免了不必要的等待时间。也避免了刷新页面需要重新上传导致垃圾文件的问题本文将通过 Vue.js 结合来实现一个简单的文件并发上传操作,完成文件上传后再提交表单。在表单页面进行上传文件的提交,使用并发操作使得所有文件手动上传文件成功再进行提交表单信息的操作,所有我们把上传操作放在提交按钮的时候进行。
2024-11-14 14:55:17
371
原创 动态添加class的使用
伪类与伪类元素在 CSS 中扮演不同的角色:伪类(Pseudo-Classes):选择元素的某个状态,例如 :hover 表示鼠标悬停在元素上时的状态,:active 表示元素被点击时的状态。伪类元素(Pseudo-Elements):选择元素的某个特定部分或生成内容,例如 ::before 和 ::after,可以插入装饰性内容。
2024-10-21 10:40:54
584
原创 反引号``和单引号‘‘的区别
反引号(``)更灵活,可以处理变量插值、表达式、多行字符串以及特殊字符,非常适合动态生成复杂的字符串。单引号('')更适合定义简单的静态字符串,不需要插值或表达式的场景。
2024-10-10 10:55:48
437
原创 修改element表格组件的展开图标
使用deep对深层嵌套的dom进行修改。1.把组件的原来的图标隐藏。2.修改未展开的节点的图标。3.修改展开节点的图标。
2024-09-14 17:43:56
605
原创 创建类实例对象和普通对象类型的区别
类是一种蓝图或模板,定义了对象的结构和行为(属性和方法),你可以通过 new。使用案例:构建和处理表单数据然后将这些数据发送到服务器。构造函数创建的对象,它不需要依赖类进行定义。实例化一个类来生成对象。普通对象是通过字面量或者。
2024-09-05 14:04:41
374
原创 vue项目和js的知识点
在 JavaScript 中,可以使用双感叹号!来将任意类型的值转换为布尔类型。在处理变量赋值时,如果想要防止 undefined 的情况,使用 || 设置默认值。当我们在 HTML 模板中使用属性时,避免嵌套冲突的推荐方式是用双引号包裹单引号。在使用双向绑定时,父组件也需要使用 v-model,否则数据无法同步到子组件。当双向绑定的数据需要通过按钮等操作才能更新时,可以添加一个控制变量来实现。在判定时,如果值为 undefined,使用 || 来防止报错。
2024-09-05 11:55:14
308
原创 js总结知识点
查找数组中符合特定条件的第一个索引,也可判断一个元素存不存在这个数组中返回下标如果找不到则返回-1 (callback回调函数)返回索引或-1。是 JavaScript 数组中的一个方法,用于返回数组中满足提供的测试函数的第一个元素的值。:用于检测数组或字符串中是否包含特定元素的方法,(数组中搜索的元素,开始搜索的索引) 返回boolean。:获取对象所有可枚举属性的名称,并以数组的形式返回这写名称。对象是节点的集合,是一个类似数组的对象节点,一般通过。将对象的key转化为数组。
2024-08-19 17:57:39
354
原创 封装组件方法
封装的目的是隐藏对象的内部状态和实现细节,只暴露必要的接口给外部使用者在父组件导入子组件并且使用子组件把父组件data数据绑定在子组件的v-model上在子组件通过props接收父组件传来的value数据,并且在子组件的data数据里面通过赋值操作把父组件的value赋值给子组件的cValue,然后把cValue绑定在子组件的v-model上在子组件自定义一个model,传入父组件值为参数,和一个事件change函数。
2024-07-16 10:00:50
492
1
原创 【无标题】
通过这次部门树组件的例子,我学会了如何创建一个部门数,以及创建部门树的流程,与其中所包含关于新增修改删除查找的逻辑,也懂得组件的拆分,在其中添加交互的功能如拖拽。但是在递归和一些需求操作细节上面还很不熟练还需要加强练习。还有在一些页面的逻辑运算也有点生疏,多练习逻辑转换。
2024-01-29 09:48:29
794
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅