自定义博客皮肤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)
  • 收藏
  • 关注

原创 sdk和API接口的区别

在实际开发中,SDK 和 API 通常是结合使用的。例如,一个 SDK 可能包含多个 API,开发者可以通过 SDK 提供的 API 来访问底层服务或功能。

2024-09-10 13:28:51 231

原创 2023程序员热门技术分析

👉 jQuery 和 Express 是所有受访者接下来的两种流行 Web 技术,专业开发人员使用 jQuery 比学习编程的人多 (24% vs. 18%),而学习编程的人使用 Express 比专业人士多 (25% vs. 20%)。👉学习编程的人使用 AWS (19%) 的比例与其他两个云平台(19% 使用 Google Cloud 和 19% 使用 Firebase)持平,但使用 Azure 的比例远低于所有受访者(11% vs. 26%)。不到 20% 的开发人员希望明年再次使用它。

2024-08-16 15:55:13 666

原创 2023程序员热门技术分析

👉2023 年,JavaScript 连续 11 年成为最常用的编程语言,延续了这一势头。👉Python 已取代 SQL 成为第三大最常用的语言,但对于那些非专业开发人员或正在学习编码的人来说(其他程序员),Python 排名第一。👉今年,一些技术排名上升了一位(Bash/Shell、C、Ruby、Perl 和 Erlang),其中两项技术排名上升了两位(Elixir 和 Lisp)。👉自 2022 年以来,排名上升七位的最大推动者是可嵌入脚本语言 Lua。

2024-08-16 15:53:54 829

原创 【Promise】掌握 Promise.all并行处理异步操作

它接受一个可迭代的 Promise 对象(如数组),并返回一个新的 Promise 对象。这个新的 Promise 对象在所有输入的 Promise 对象都成功完成时才会成功,如果任何一个 Promise 对象失败,则立即失败。接收一个包含三个 Promise 对象的数组,并在所有 Promise 都成功完成后,返回一个包含所有结果的数组。在这个例子中,我们并行地从三个不同的 API 端点获取数据,并在所有数据都成功返回后进行处理。的一个关键特性是,如果任何一个 Promise 失败,整个。

2024-07-22 14:26:27 490

原创 【CSS】容器查询:@container

容器查询是一种CSS特性,允许开发者根据组件所在的容器的大小来应用样式,而不是整个视口的大小。这使得组件能够更加灵活地适应不同的布局环境,而不仅仅是依赖于视口的大小。

2024-07-22 13:43:58 364

原创 【SCSS】use的详细使用规则

如果发现自己想要一次配置多个变量,将映射作为配置传递,或者在模块加载后更新配置,请考虑编写一个mixin来设置您的变量,然后再编写一个mixin来注入样式。但是,有时您可能想要选择不同的命名空间——您可能想要为经常引用的模块使用较短的名称,或者您可能正在加载具有相同文件名的多个模块。如果你想让一个成员对整个包而不是单个模块私有,只是不要从你的包的任何入口点转发它的模块(你告诉用户加载以使用你的包的样式表)。要加载带有配置的模块,使用。如果使用as *,给该模块中定义的变量赋值,将覆盖其在该模块中的值。

2024-06-06 20:07:02 577

原创 【CSS】will-change 属性详解

will-change 是一个 CSS 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化渲染性能,提前做一些准备工作,从而提高性能。

2024-06-05 14:35:31 1265

原创 【CSS】clip-path 属性详解

clip-path 属性用于在 SVG 和 HTML 中创建复杂的裁剪区域(即剪切路径),从而只显示元素的一部分。

2024-06-05 11:06:09 1030

原创 【CSS】object-fit 和 object-position 属性详解

object-fit和object-position是CSS属性,用于控制图像或视频在其容器中的适应和定位方式。

2024-06-04 18:04:50 1353

原创 【CSS】aspect-ratio属性详解

aspect-ratio 属性是 CSS 中的一个有用属性,它允许你轻松地设置元素的宽高比。这个属性可以确保元素在不同屏幕尺寸和容器大小下保持一定的宽高比,非常适用于响应式设计中。

2024-06-04 10:31:30 1837

原创 【CSS】scroll-snap属性详解

scroll-snap 是一个用于实现流畅滚动捕捉效果的 CSS 模块。它包含多个属性,可以应用于滚动容器和滚动子项上。

2024-06-03 19:14:03 1059

原创 【CSS】小众但非常有用的 CSS 属性一览

属性可以帮助你创建流畅的滚动体验,常用于图片画廊和轮播图。属性可以提示浏览器某些元素将要发生变化,从而优化渲染性能。属性允许你设置元素的宽高比,适用于保持图片和视频的比例。属性可以控制滚动边界行为,防止滚动事件“溢出”到父元素。属性可以控制替换元素(如图片或视频)如何适应其容器,属性可以应用图像处理效果,如模糊、亮度和对比度。属性可以在背景内容上应用图像处理效果。属性允许你创建复杂的形状和遮罩效果。可以控制替换元素在其容器内的位置。属性定义元素内容的混合模式。属性可以控制文本的书写方向。

2024-06-03 18:24:23 337

原创 【vue+ts】性能优化,defer优化白屏

【代码】【vue+ts】性能优化,defer优化白屏。

2024-05-31 18:28:45 311

原创 【vue3】Vue3+ts引入Markdown(支持边写边编译)

是vue3 环境的 Markdown 编辑器,使用 jsx 和 typescript 语法开发,支持在 tsx 项目使用。使用更多的扩展工具栏组件,例如:导出内容为 PDF。使用已存在的语言、主题扩展,例如:日语。

2024-03-11 10:09:03 979

原创 【2024】vue-router和pinia的配置使用

有点复杂,但是正规,修行看个人,看懂多少凭本事吧,其实上面哪些也够用了!在使用的时候引入就可以了!

2024-03-05 17:39:39 948

原创 【2024】使用Vuetifi搭建vue3+Ts项目,并使用tailwind.css

只要跟着官方文档来就不会出错。

2024-03-05 16:46:05 585

原创 【Vue3】Ref 和 ShallowRef 的区别

Ref 是 Vue 3 中的一个新的基本响应式数据类型,它允许我们包装任意的 JavaScript 值,并且在数据变化时发出通知。Ref 提供了一个 .value 属性来访问其内部的值,同时还提供了一些额外的 API 来处理数据。Ref 可以被用于跟踪单个值的变化,并在需要时自动触发重新渲染。ShallowRef 与 Ref 类似,它也是用来包装值并监听变化的。但是,与 Ref 不同的是,ShallowRef 会对其包装的值进行浅层的响应式转换。

2024-03-05 12:56:09 1784

原创 【CSS】进阶grid布局理论知识(第一章)

对于由不同大小的元素组成、需要复杂布局的网站,grid是您的最佳选择。虽然您可以实施一些 Flexbox hack 来实现这些布局,但这些 hack 通常很复杂并且需要更长的代码行,因为您没有使用正确的工具来完成这项工作。虽然grid和 flex都不是万能的解决方案,但在某些情况下,grid作为完成这项工作的正确且更好的工具而大放异彩。显式网格线是在 CSS 中定义的行和列的开发工具中可见的实线。而是由浏览器做出的。最后,如果您希望更灵活地移动元素,无论 HTML 标记的结构如何,grid应该是您的首选。

2024-03-03 20:11:47 858

原创 【CSS】初学了解Grid布局

Grid布局是一种二维的布局系统,它允许我们在水平和垂直方向上同时控制网格中的项目位置。通过将页面划分为行和列,我们可以轻松地创建出复杂的布局结构,而不需要复杂的嵌套和计算。

2024-03-03 18:55:06 407

原创 【CSS】初学轻松学会使用Flex布局

Flex布局是一种基于盒子模型的布局方式,它让我们可以轻松地控制容器内的元素在主轴和交叉轴上的排列方式。通过设置不同的Flex属性,我们可以实现各种不同的布局效果,从简单的居中对齐到复杂的多列布局。

2024-03-03 18:49:55 726

原创 一个好看实用的【图片-文本】滚动交互

如何实现呢?初始样式接下来,我们可以对元素进行一些样式设置。里面的文字可以简单地是白色的。但是,要获取内部元素的挖空文本,我们需要应用背景图像,然后使用和CSS 属性将背景应用到文本本身而不是元​​素的边界。请注意,背景的大小与我们元素的大小相同。确保事情顺利进行很重要。剪切文本和容器这就是事情开始变得非常有趣的地方。我们只希望当容器的当前滚动位置位于其父容器的边界内时容器可见。通常这可以通过在父容器上使用来解决。但是,由于我们的两个元素都使用固定定位,因此它们现在是相对于浏览器窗口而不是父元素定

2024-02-26 17:49:55 404

原创 【JS】【Vue3】【React】获取滚轮位置的方法:JavaScript、Vue 3和React示例

随着Web应用程序的发展,滚轮位置的获取变得越来越重要,可以用于实现页面的滚动效果、导航条的隐藏和显示等功能。本文将探讨在JavaScript、Vue 3和React中获取滚轮位置的不同方法,并提供相应的示例。

2024-02-26 17:26:27 897

原创 【JS】【Vue3】【React】获取鼠标位置的方法:JavaScript、Vue 3和React示例

随着Web应用程序的复杂性不断增加,获取用户交互信息变得越来越重要。其中,获取鼠标位置是一项常见的任务,可以用于实现各种交互效果,如拖拽、悬停提示等。本文将探讨在JavaScript、Vue 3和React中获取鼠标位置的不同方法,并提供相应的示例。

2024-02-26 17:22:35 1575

原创 图片加载缓慢的原因及解决办法

优化图片大小、压缩和优化图片、优化服务器性能、分批加载图片、懒加载、考虑用户网络环境等都是提高页面加载速度的有效方法。

2024-02-26 17:15:08 5618

原创 【Vue3】Composition API与Options API:选择正确的方式组织你的Vue代码

setup() {return {count,increment通过以上示例,我们可以看到的使用方式和有着明显的区别。更灵活、可复用,并且将相关逻辑集中在一起,更易于理解和维护。综上所述,Vue 3的与各有特点和适用场景,了解它们的区别和优劣势,可以帮助你更好地选择合适的方式来组织和管理你的Vue代码。

2024-02-26 17:04:38 1194

原创 【JS】substring方法与substr的区别

虽然 substring 和 substr 方法在某些情况下可以互换使用,但它们的参数和行为上存在一些差异。在使用时,需要根据具体需求选择合适的方法,并注意其不同之处,以避免出现意外的结果。

2024-02-22 11:44:15 994

原创 【正则表达式】为那些需要刷新记忆的人准备,不适合新手

字符:除了在正则表达式中具有特殊含义的字符外,所有字符都与自身匹配。例如,正则表达式x匹配子字符串"x";正则表达式9匹配"9";正则表达式=匹配"=“;和正则表达式@匹配”@"。特殊正则表达式字符:这些字符在正则表达式中具有特殊含义(将在下面讨论):., +, *,?转义序列(\char)要匹配正则表达式中具有特殊含义的字符,需要使用带有反斜杠 ( ) 的转义序列前缀。例如,.火柴".“;正则表达式+匹配”+“;和正则表达式(匹配”("。还需要使用正则表达式\来匹配""(反斜杠)。

2024-02-22 11:05:44 824

原创 【TS】toString() 方法与 String() 的区别

toString() 方法是对象上的方法,用于将对象转换为字符串。String()构造函数是用来创建字符串对象的构造函数,它可以将任何类型的值转换为字符串。

2024-02-07 16:53:06 629

原创 【vue】JavaScript 和 TypeScript 数组方法详解

大家都知道,在做前后端交互的时候,后端传回来的数据有很多都是数组类型,那么也必定会有很多复杂的数组操作,你是不是还只会简单的push和forEach?

2024-02-07 14:02:40 548

原创 【TS】parsInt和Number转数字的区别是什么

parseInt()和Number()都是 JavaScript 中用于将字符串转换为数字的函数,但它们之间存在一些关键差异。

2024-02-02 17:53:05 514

原创 【vue】Vuex 与 Pinia:Vue.js 状态管理库对比

Vuex 和 Pinia 都是 Vue.js 的状态管理库,它们都提供了集中式存储和管理应用程序状态的功能。但是,它们在设计和实现上存在一些关键差异。Vuex 采用集中式状态管理的方式,它具有良好的文档和社区支持,并且它与 Vue.js 的集成非常紧密。但是,Vuex 也有一些缺点,例如它相对复杂,并且它可能会导致应用程序的性能问题。Pinia 采用分散式状态管理的方式,它相对简单,并且它不会导致应用程序的性能问题。

2024-02-02 17:31:45 423

原创 【Vue.js】Vue.js 中的 nextTick() 方法

方法在 Vue.js 中是一个非常有用的工具,它允许你在当前事件循环结束后执行某些操作。这对于在 DOM 更新后执行操作非常有用,因为它可以确保在 DOM 更新完成后再执行这些操作。 方法接受一个回调函数作为参数,该回调函数将在当前事件循环结束后执行。回调函数可以接收一个参数,该参数是 Vue 实例。以下是一些使用 方法的示例:

2024-02-01 15:15:39 540 1

原创 【vue3+TS】customRef在实战中的使用(防抖)

customRef用于自定义一个ref,可以显式的控制依赖追踪和触发响应,接受一个工厂函数,两个参数分别用于追踪的track与用于触发响应的trigger,并返回一个带有get和set属性的对象,在实际开发中可以实现。是指在一段时间内,如果同一个函数被多次触发,则只执行最后一次,如果这段时间内没有再次触发该函数则执行一次。频繁触发的事件,如输入框输入时实时搜索,在用户输入时每次都发起请求会造成性能问题,可以用防抖函数实现一定的延迟,等待用户输入完成后再请求。

2023-11-21 21:35:00 325

原创 【vue3】watch与watchEffect的全面用法(一篇就会)

默认初始时不执行回调,但可以通过配置immediate为true,来指定初始时立即执行第一次,通过配置deep为true,来指定深度监听。watchEffect可以不用直接指定要监听的数据,回调函数中使用的哪些响应式数据就监听哪些响应式数据,watch可以监听一个或多个响应式数据,一旦数据变化,就自动执行监听回调。如果监听多个数据,需要使用数组来指定。(主要区别在watch监听的数据上)如果是监听reactive对象中的属性,必须通过函数来指定。没有点击按钮时,显示undefined。

2023-11-21 20:57:05 315

原创 Vue3中computed计算属性的全面用法(简单易懂,一篇就会)

所以在vue3中,如果需要既要循环数据,又要对数据进行筛选,就用到了computed。在vue3版本中,v-if和v-for不能同时使用。computed用于简单的计算。

2023-11-21 19:35:15 5586 1

原创 Vue3版本开发toast插件

Vue3的Toast插件是一种消息提示组件,主要用于消息通知、加载提示、操作结果提示等醒目提示效果。Toast组件几乎是没有个组件库必备的组件,通过Toast组件开发可以比较全面的学习Vuejs的相关技能点。在src目录下新建文件夹plugins,在plugins中新建文件夹my-toast,然后在这个文件夹里新建一个mytoast.vue和一个index.ts。到现在就是可以打印出虚拟节点vm的内容看一下,就是。这就是调用了onClose方法。三秒后会消失,并且控制台打印。

2023-11-21 19:31:13 885

原创 Vue3框架在大规模应用中的性能优化策略

Vue3作为现代前端框架的代表,通过引入片段、静态提升和优化事件处理等手段,进一步提升了虚拟DOM的效率,使得Vue应用在大规模和复杂场景下依然能够保持出色的性能表现。在传统的前端开发中,每次数据发生变化时,都会直接操作真实的DOM。在实际开发中,建议开发团队定期进行性能监测,根据性能监测结果,结合本研究提供的策略,进行有针对性的性能优化,以保持应用的高性能和良好用户体验。Vue3框架作为一种响应式、组件化的前端框架,其性能受到诸多因素的影响,包括组件的复杂度、数据的处理和响应速度、虚拟DOM的使用等。

2023-11-01 21:56:01 273 2

原创 深入探讨Vue 3生命周期钩子及其具体用法

生命周期钩子是Vue组件提供的一组函数,用于在组件的不同生命周期阶段执行特定的代码。这些生命周期钩子可以让您在组件创建、挂载、更新和销毁等关键时刻插入自定义逻辑。Vue 3的生命周期钩子与Vue 2相似,但也有一些重要的变化。Vue 3 提供了一组强大的生命周期钩子和数据监听机制,以帮助您更好地管理组件的生命周期和数据。watch 函数作为 Vue 3 中的一个重要特性,允许您监听数据变化并执行自定义操作。结合生命周期钩子和 watch 函数,您可以构建出高效、可维护的Vue应用程序。

2023-09-16 16:20:44 648 1

原创 Vue 3 和 Vue 2 生命周期对比及其区别

在 Composition API 中,生命周期钩子可以作为函数使用,而不是对象的属性,这进一步改变了生命周期的编写方式。在 Vue 2 中,子组件的 beforeDestroy 钩子会在父组件的 beforeDestroy 钩子之前调用。然而,在 Vue 3 中,子组件的 beforeUnmount 钩子会在父组件的 beforeUnmount 钩子之后调用。在 Vue 3 中,unmounted 钩子执行后,组件会更彻底地被销毁,减少了内存泄漏的可能性。首先,让我们回顾一下 Vue 2 的生命周期。

2023-09-16 16:10:44 230 1

原创 【vue3+ts】动态生成word文件并下载

看了很多帖子,最后还是自己搞定的……没一个靠谱的,都说不清楚,那就自己动手吧!

2023-05-21 14:33:55 2107 15

Dart学Dart?这一篇就够了!

Dart语法:学Dart?这一篇就够了!

2023-04-05

空空如也

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

TA关注的人

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