自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

工作的日常记录和平凡的生活分享

面对人生的起落,放平心态,得之淡然,失之坦然。把抱怨环境的心情,化为上进的力量,一个人才能走出低谷,走向未来。

  • 博客(51)
  • 收藏
  • 关注

原创 pnpm的安装、配置和更新以及与npm的使用差异

在本研究中,我们对pnpm的安装、配置以及更新进行了全面的总结,并与npm的使用差异进行了对比分析。

2024-08-30 21:49:44 1293

原创 在JavaScript中,要判断复制出来的对象与原始对象相比有哪些属性被修改

通过将两个对象序列化为JSON字符串,然后比较这两个字符串,可以快速判断对象是否发生了变化。在JavaScript中,要判断复制出来的对象与原始对象相比有哪些属性被修改了,你可以使用几种不同的方法。选择哪种方法取决于你的具体需求,例如是否需要深度比较、是否包含复杂数据类型等。如果需要更复杂的比较逻辑,例如深度比较或比较数组和函数,可以使用像。

2024-08-30 21:48:53 1040

原创 小程序、H5、APP中的微信支付概述和实战总结

微信支付作为中国领先的移动支付方式之一,其便捷性、安全性以及广泛的用户基础使其成为商家和开发者不可忽视的支付渠道。根据2024年的数据统计,微信支付的日交易量已超过十亿笔,覆盖线上线下多种支付场景。微信支付的普及不仅极大地方便了用户的日常支付行为,也促进了移动支付技术的发展和应用。其安全性通过多重加密和风险控制机制得到了保障,增强了用户对移动支付的信心。

2024-07-30 21:45:00 1413

原创 权限管理的概述以及vue开发前端的路由、菜单、按钮权限控制实现方案

创建自定义指令,如,用于简化按钮级别的权限控制。通过该指令,可以直接在元素上声明所需的权限,指令内部处理是否显示该元素的逻辑。自定义指令是Vue中一种强大的功能,可以用来封装和复用DOM操作逻辑。通过自定义指令,可以实现更灵活和可复用的按钮权限控制。实现方式:创建一个全局或局部的自定义指令,用于判断用户是否具有执行按钮操作的权限。示例代码

2024-07-30 21:30:00 1434

原创 微信小程序图片保存功能和API讲解以及项目实战介绍

微信小程序提供了API,允许开发者实现将图片保存到用户手机相册的功能。这一功能在多个场景下都非常实用,例如用户希望保存小程序中的图片作为纪念或记录。权限请求:首先,小程序需要请求用户的授权,以获取保存图片到相册的权限。这通常涉及到调用来检查用户是否已经授权,如果没有,则需要调用来发起授权请求。图片保存流程:一旦获得授权,小程序可以通过下载网络图片到本地临时路径,然后使用API将图片保存到相册。这一流程需要处理网络请求和文件操作,确保图片能够正确保存。用户体验。

2024-07-17 20:45:00 1758

原创 【vuejs】vue2项目中封装组件的分析以及常用方式和属性讲解

定义组件模板是封装过程的第一步。在Vue2中,模板是组件的声明式部分,它描述了组件的UI结构。模板可以包含HTML标签、组件自定义标签以及Vue指令。基本结构:每个组件模板都应遵循基本的HTML结构,包括标签包裹的组件内容。组件复用:在模板中使用标签来复用已有的Vue组件或HTML元素。动态组件:利用可以实现组件的动态切换。条件渲染:使用v-ifv-else-ifv-else和v-show实现条件渲染,使组件能够根据不同条件显示不同内容。列表渲染:使用v-for。

2024-07-17 18:00:45 1038

原创 【vuejs】vue2 class和style基础讲解和项目实战使用

Vue 2中的class和style绑定提供了灵活而强大的数据绑定功能,允许开发者以声明式的方式动态地操作元素的CSS类和内联样式。通过对象语法和数组语法,Vue使得根据组件状态切换类和应用样式变得简洁而直观。对象语法:通过传递一个对象给或,可以基于数据属性的真值动态添加或移除CSS类和样式。这种方式非常适合处理单一或少量条件的绑定。数组语法:允许将多个类或样式对象组合应用到元素上,适合处理更复杂或多个条件的绑定情况。数组中的每个元素可以是字符串或对象,Vue会自动处理它们并将结果应用于元素。组件支持。

2024-07-16 20:15:00 1158

原创 yarn的安装和配置以及更新总结,npm的对照使用差异

Yarn 是一个快速、可靠和安全的 JavaScript 包管理器,它通过并行化操作和智能缓存机制,显著提升了依赖安装的速度。Yarn 还提供了离线支持,即使在没有网络的情况下,也能安装依赖包。此外,Yarn 使用yarn.lock文件锁定依赖版本,确保在不同环境中安装的依赖包版本一致,避免了“在我这能运行”的问题。

2024-07-16 20:15:00 2466

原创 html+css+JavaScript 实现两个输入框的反转动画

做完之后觉得页面上加些许过渡或动画,其变化虽小,却能极大的提升页面质感,给人一种顺畅、丝滑的视觉体验。它的实现过程主要是通过css中的transition和animation来实现的。平时在开发的时候增加一些动画效果会让页面的观赏度和用户体验提高。利用定位的方式脱离文本流之后通过改变位置来加css3的动画实现。开发时遇到了一个输入框交换的动画。

2024-07-07 20:15:00 485

原创 【vuejs】vue-router多层级路由配置以及页面嵌套的处理

在Vue2和vue-router中,自定义滚动行为是一个重要的特性,它允许开发者控制页面跳转时滚动条的移动。这对于增强用户体验至关重要,尤其是在多层级页面嵌套的情况下。滚动恢复:在多层级页面中,用户可能会离开当前页面去浏览其他部分,当他们返回时,页面应该滚动到他们离开时的位置。Vue-router允许通过函数来实现这一功能。滚动到指定位置:开发者可以通过函数让页面在跳转后滚动到指定的位置,例如,总是滚动到页面顶部或者页面的某个特定元素。滚动行为的实现:通过设置router实例的。

2024-07-07 20:15:00 3789 2

原创 html + css 快速实现订单详情的布局demo

主要是 background: repeating-linear-gradient(to right, #44928E, #44928E 15px, transparent 15px, transparent 20px);15px, transparent 15px 虚线的线条渐变的色值的宽度及虚线的宽度,不需要渐变的话这两个值设置成一样就行,就是虚线的宽度。突然安排让速写这样的一个布局,重点就是CSS画一条虚线,并且还要灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色。

2024-07-03 21:45:00 1682 4

原创 【vuejs】vue-router 路由跳转参数传递详解和应用场景及技巧

路由定义是Vue Router中实现页面路由跳转的基础。在Vue2中,路由的定义通常在应用的入口文件或路由配置文件中进行。路由定义涉及到路径模式(path)、视图组件(component)以及一些高级配置,如命名视图、重定向、别名等。- 路由模式:路由的路径模式定义了URL的路径与组件的映射关系。例如,`{ path: '/user/:id', component: User }` 表示当URL匹配到 `/user/:id` 时,将渲染 `User` 组件,其中 `:id` 是一个动态参数。- 组件映

2024-07-03 21:45:00 3205 1

原创 Date TimePicker 时间选择器精确限制到时分秒,此刻按钮点击失效处理

今天在开发的时候遇到一个需求,日期时间选择器组件不能选择已经过去的年月日时分秒。用户只能选择当前时间的时间,如果年月日选择是当天之前的时间,时分秒不做限制,如果年月日选择的是当天时间,就要判断时分秒,只能选择当前时间时分秒之前的时间。此时就会出现第一次点击此刻按钮之后就无法再继续点击了。

2024-07-02 20:30:00 558

原创 【vuejs】vue-router 之 addRoute 动态路由的应用总结

Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用。它与 Vue.js 深度集成,让开发者能够轻松地构建具有复杂用户界面的单页面应用。Vue Router 允许你定义不同的路由,并通过 组件在应用中显示匹配的组件。Vue Router 的核心特性包括:Vue Router 的安装和基本使用步骤如下:对于 Vue 2,推荐使用 Vue Router 3.x 版本。可以通过 npm 或 yarn 进行安装:1.2 项目中引入 Vue Router在项目的入口文件(如 main.j

2024-07-02 20:30:00 4355

原创 【创作纪念日】创作的初心和个人发展的收获

在实战项目中,我积累了丰富的经验,这些经验不仅提升了我的专业技能,也让我意识到分享知识的重要性。通过将项目中的挑战和解决方案记录下来,我希望能够为同行提供参考和启发。

2024-06-28 19:00:00 705

原创 【vuejs】首次页面加载时触发那些声明周期钩子函数

钩子函数在Vue.js中是一种特殊的生命周期函数,它们允许开发者在Vue实例的生命周期过程中执行自定义操作。Vue.js提供了多种钩子函数,包括初始化、挂载、更新和销毁等阶段的钩子。在Vue.js中,页面或组件的首次加载会触发一系列特定的生命周期钩子函数,这些钩子函数允许开发者在组件的不同阶段执行自定义代码。:在Vue实例初始化之后,数据观测和事件配置之前被调用。此时,组件的数据对象data和方法methods尚未被创建,因此无法访问它们。created:实例已经创建完成之后被调用。

2024-06-28 19:00:00 1901

原创 【vuejs】directive 自定义指令的详解和使用总结

Vue.js 提供了一系列内置指令,如v-bindv-modelv-on等,它们覆盖了大多数常见的DOM操作需求。然而,内置指令可能无法满足所有特定的业务场景,这时自定义指令就显得尤为重要。自定义指令允许开发者定义自己的逻辑,这些逻辑可以在元素上应用,并且可以包含钩子函数,如bindinsertedupdate和unbind。通过自定义指令,开发者可以封装复杂的操作,使得代码更加模块化和重用。例如,一个自定义指令可以用于实现一个复杂的动画效果,或者是一个条件地显示或隐藏元素的逻辑。

2024-06-27 22:30:00 1011

原创 【Vue.js】 Mixin 局部混入与全局混入的介绍和使用总结以及优缺点分析

Mixin 和 Vuex 各有其适用场景,它们在 Vue.js 应用中扮演不同的角色。Mixin 更适合功能复用,而 Vuex 专注于状态管理。在实际开发中,根据应用的规模和需求,合理选择使用 Mixin 或 Vuex,或者两者结合使用,以达到最佳的开发效果。

2024-06-27 22:30:00 1708 1

原创 React AntDesign Layout组件布局刷新页面错乱闪动

经过组件属性的研究才发现,设置 hasSider 为 true 就能解决上面的问题,耽搁了半天的时间,接着踩坑接着加油!Layout组件布局后刷新页面时,页面布局错乱闪动。大家最近在使用React。

2024-06-23 22:26:14 342

原创 react-router-dom 6.4版本的尝鲜和总结

React Router 6.4 版本是继6.0大版本更新之后的又一重要里程碑。此版本发布于2024年,旨在进一步优化开发者体验,提供更加强大和灵活的路由功能。6.4版本在前一版本的基础上,引入了新的数据抽象,增强了导航钩子,使得UI与数据的同步更加容易。

2024-06-22 06:30:00 1195

原创 npm、yarn、pnpm 最新国内镜像源设置和常见问题解决

与npm类似,yarn也有国内镜像源的选项,以提升在中国大陆地区的访问速度和稳定性。pnpm作为新兴的包管理工具,同样支持使用国内镜像源以优化在中国大陆地区的使用体验。

2024-06-22 06:00:00 46313 2

原创 【vuejs】$forceUpdate 的使用和讲解

forceUpdate是Vue实例的一个内置方法,用于强制Vue组件重新渲染。通常情况下,Vue的响应式系统能够自动检测到数据的变化并更新DOM,但在某些特定情况下,可能需要手动触发重新渲染,$forceUpdate方法在这些场景下非常有用。

2024-06-21 08:48:28 4185

原创 【vuejs】 $on、$once、$off、$emit 事件监听方法详解以及项目实战

vm.$on是Vue实例用来监听自定义事件的方法。它允许开发者在Vue实例上注册事件监听器,当事件被触发时,指定的回调函数会被执行。

2024-06-21 08:47:39 2239

原创 【vuejs】$nextTick的原理分析和使用场景

优先级高:微任务在当前执行栈清空后立即执行,优先于宏任务。快速响应:微任务的执行不会等待浏览器的下一个渲染周期,可以更快地响应数据变化。适用于频繁操作:由于执行速度快,微任务适合处理需要快速反馈的频繁操作。优先级低:宏任务在当前执行栈清空并且所有微任务执行完毕后执行。可能影响渲染:宏任务的执行可能需要等待浏览器的下一个渲染周期,因此可能会影响页面的渲染性能。适用于低频操作:宏任务适合处理不需要立即反馈的低频操作。

2024-06-07 15:57:49 2118

原创 【vuejs】vm.$set() 的原理解析和方法以及应用场景

vm.$set是 Vue 实例的一个方法,它提供了一种在 Vue 实例的响应式对象上动态添加新属性的方式。当使用vm.$set向响应式对象添加新属性时,Vue 会确保这个新属性同样是响应式的,并且能够触发视图的更新。

2024-06-07 15:25:25 1957 1

原创 【vuejs】keep-alive组件的原理讲解和使用讲解

Vue.js 框架中的组件是一个用于缓存组件实例的内置组件,它使得组件在不活动时保持其状态,从而提高应用的性能和用户体验。当使用动态组件切换视图时,不在显示的组件实例会被销毁并重新创建,这会导致状态丢失。而可以避免这种情况,它缓存了这些组件实例,使得它们在重新激活时能够保持之前的状态。

2024-06-05 12:22:22 1311

原创 Proxy 与 Reflect 的关系、作用与应用场景

代理(Proxy)是一种设计模式,允许为其他对象创建一个代表或占位符对象,以控制对它的访问。在JavaScript中,Proxy 对象是一个内置对象,用于创建一个对象的代理,从而可以拦截和自定义对象的基本操作,如属性查找、赋值、枚举、函数调用等。反射(Reflect)是ES6中引入的一个内置对象,它提供了拦截JavaScript操作的方法,这些方法与Proxy对象的陷阱(trap)方法相对应。Reflect对象的方法可以用来实现默认行为,使得在Proxy中可以方便地定义自定义行为。

2024-06-05 12:21:27 1135

原创 【vuejs】组件中 data 函数的作用和分析

使用函数定义data,Vue还提供了额外的优势。例如,可以在data函数内部访问this关键字,这意味着可以基于组件的属性或其它状态来初始化data对象。此外,函数返回的对象可以包含方法,这些方法可以用于操作数据,使得状态管理更加集中和一致。这种方法提高了组件设计的灵活性和可维护性。组件中data定义为函数是Vue框架设计的核心决策之一,它确保了组件的复用性和数据隔离。通过这种方式,每个组件实例都能拥有一个独立的状态,避免了不同实例间数据的相互影响。

2024-06-03 14:34:42 1196 1

原创 【vuejs】常用的组件之间数据通信方式总结

vue.js组件实例的作用域是相互独立的,不同组件之间的数据不能相互访问,组件有父级组件、子级组件、兄弟组件、如何选择组件之间的通信方式?今天就来总结一下常用的几种组件传值方式。

2024-06-03 11:47:11 810 1

原创 【vuejs】 computed 和 watch 的区别和使用场景说明

侦听属性watch是 Vue.js 中用于观察和响应 Vue 实例中数据变化的一种机制。它允许开发者指定某些数据作为侦听对象,当这些数据发生变化时,可以执行相应的操作。

2024-05-31 15:56:55 924

原创 【vuejs】v-if和v-show的原理、异同、使用场景的分析

在Vue中,提供的v-if和v-show都是用来控制元素是否在页面上显示的条件指令。当条件为true时,它们都会使元素可见;当条件为false时,它们都会隐藏元素。这一点在Vue的官方文档中也有明确的说明,它们提供了一种简单的条件渲染机制。

2024-05-31 11:03:20 1264

原创 JavaScript事件循环机制(event loop)、宏任务、微任务总结

多线程 vs 单线程:浏览器通过多线程模型处理异步任务,而Node.js使用单线程事件循环。宏任务与微任务的执行:浏览器在每个事件循环迭代中先执行宏任务,然后清空微任务队列;Node.js在每个阶段结束后检查微任务队列,并在适当时机执行微任务。:Node.js特有的允许回调在当前事件循环迭代的末尾执行,提供了更高的执行优先级。理解这些差异对于在不同环境中编写高效且可靠的JavaScript代码至关重要。

2024-05-30 16:04:51 1221 4

原创 Chrome DevTools基本操作和功能介绍

Chrome DevTools 是一套内置于 Google Chrome 浏览器中的开发者工具集,它为前端开发者提供了调试网页的强大功能。通过 DevTools,开发者可以进行性能分析、网络状况监控、JavaScript 调试、代码编辑、模拟移动设备测试等。专为开发者设计,用于帮助他们对网站进行调试和分析。其功能涵盖了从查看和修改网页元素,到深入的性能分析和网络通信追踪。

2024-05-30 09:10:03 1231

原创 scss常用语法和基本使用

SCSS(Sassy CSS)是一种CSS预处理器,它在CSS的基础上增加了变量、嵌套规则、混合宏等高级功能,使得CSS代码更加模块化和可维护。SCSS的语法扩展了CSS,允许开发者以一种更加结构化和编程友好的方式来编写样式表。

2024-05-29 11:04:01 1181

原创 【React】react函数式编程常用hooks讲解

React Hooks 是 React 16.8 版本引入的一项重要特性,它极大地简化和优化了函数组件的开发过程。React 中常用的 Hooks,包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useLayoutEffect等。这些 Hooks 涵盖了状态管理、副作用处理、性能优化、DOM 操作等各个方面,为开发者提供了强大的工具。

2024-05-29 11:02:41 2514 1

原创 dayjs 常用方法总结以及项目实战

自定义格式化是 Day.js 的一个强大功能,它允许开发者根据特定的需求来定义日期时间的显示格式。定义格式:可以通过字符串模板定义自定义的日期时间格式。Day.js 将根据模板中的指令解析和显示日期。使用场景:自定义格式化特别适用于需要遵循特定格式标准或展示非标准日期时间格式的场景。自定义日期格式将日期显示为的格式。组合年月日和时间将输出日期和时间,如。包含星期信息将输出包含星期的日期,例如'28.05.2024 星期二'。自定义格式的应用非常灵活,可以根据不同的业务需求来调整日期时间的显示方式。

2024-05-28 15:46:39 3789

原创 react useState基本使用

React Hooks是React 16.8版本引入的新特性,它允许在不编写类的情况下使用state和其他React特性。Hooks的引入极大地简化了组件的编写,使得函数式组件能够拥有类似类组件的功能。

2024-05-28 15:43:46 1110

原创 【element-ui】el-date-picker 组件 type=“monthrange“ 选择时间段操作异常

但是看了所有的属性和方法都没有发现可以清除上次选择的值,也在网上各种搜索没找到解决办法,经过各种办法处理后得到了最简单处理方式,就是利用 key 值的变化重新渲染组件。如果使用了key,Vue会根据keys的顺序记录element,曾经拥有了key的element如果不再出现的话,会被直接remove或者destoryed。如果不用key,Vue会用一种算法:最小化element的移动,并且会尝试尽最大程度在同适当的地方对相同类型的element,做patch或者reuse。

2024-04-30 16:16:52 444

原创 分享一份项目中使用的vite.config.ts的配置项集合

分享一份项目中使用的vite.config.ts的配置项集合。

2024-04-30 16:15:17 248

原创 【nodejs】npm镜像配置及常用的基本命令解释说明

npm(Node Package Manager)是 Node.js 的默认包管理器,nodejs安装成功后npm也已经按照好了。npm用于管理和安装第三方库、框架和工具。在某些情况下,由于网络原因,直接使用官方的 npm 仓库可能会很慢或者无法访问。这时,你可以通过配置 npm 来使用一个镜像站点,从而加速包的下载和安装。

2024-04-13 11:20:38 2294 2

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除