- 博客(38)
- 收藏
- 关注
RSS订阅原创 【vue3】Vue3+ts引入Markdown（支持边写边编译）
是vue3 环境的 Markdown 编辑器，使用 jsx 和 typescript 语法开发，支持在 tsx 项目使用。使用更多的扩展工具栏组件，例如：导出内容为 PDF。使用已存在的语言、主题扩展，例如：日语。
2024-03-11 10:09:03
551
原创 【2024】vue-router和pinia的配置使用
有点复杂，但是正规，修行看个人，看懂多少凭本事吧，其实上面哪些也够用了！在使用的时候引入就可以了！
2024-03-05 17:39:39
550
原创 【Vue3】Ref 和 ShallowRef 的区别
Ref 是 Vue 3 中的一个新的基本响应式数据类型，它允许我们包装任意的 JavaScript 值，并且在数据变化时发出通知。Ref 提供了一个 .value 属性来访问其内部的值，同时还提供了一些额外的 API 来处理数据。Ref 可以被用于跟踪单个值的变化，并在需要时自动触发重新渲染。ShallowRef 与 Ref 类似，它也是用来包装值并监听变化的。但是，与 Ref 不同的是，ShallowRef 会对其包装的值进行浅层的响应式转换。
2024-03-05 12:56:09
867
原创 【CSS】进阶grid布局理论知识(第一章)
对于由不同大小的元素组成、需要复杂布局的网站，grid是您的最佳选择。虽然您可以实施一些 Flexbox hack 来实现这些布局，但这些 hack 通常很复杂并且需要更长的代码行，因为您没有使用正确的工具来完成这项工作。虽然grid和 flex都不是万能的解决方案，但在某些情况下，grid作为完成这项工作的正确且更好的工具而大放异彩。显式网格线是在 CSS 中定义的行和列的开发工具中可见的实线。而是由浏览器做出的。最后，如果您希望更灵活地移动元素，无论 HTML 标记的结构如何，grid应该是您的首选。
2024-03-03 20:11:47
832
原创 【CSS】初学了解Grid布局
Grid布局是一种二维的布局系统，它允许我们在水平和垂直方向上同时控制网格中的项目位置。通过将页面划分为行和列，我们可以轻松地创建出复杂的布局结构，而不需要复杂的嵌套和计算。
2024-03-03 18:55:06
383
原创 【CSS】初学轻松学会使用Flex布局
Flex布局是一种基于盒子模型的布局方式，它让我们可以轻松地控制容器内的元素在主轴和交叉轴上的排列方式。通过设置不同的Flex属性，我们可以实现各种不同的布局效果，从简单的居中对齐到复杂的多列布局。
2024-03-03 18:49:55
660
原创 一个好看实用的【图片-文本】滚动交互
如何实现呢？初始样式接下来，我们可以对元素进行一些样式设置。里面的文字可以简单地是白色的。但是，要获取内部元素的挖空文本，我们需要应用背景图像，然后使用和CSS 属性将背景应用到文本本身而不是元素的边界。请注意，背景的大小与我们元素的大小相同。确保事情顺利进行很重要。剪切文本和容器这就是事情开始变得非常有趣的地方。我们只希望当容器的当前滚动位置位于其父容器的边界内时容器可见。通常这可以通过在父容器上使用来解决。但是，由于我们的两个元素都使用固定定位，因此它们现在是相对于浏览器窗口而不是父元素定
2024-02-26 17:49:55
376
原创 【JS】【Vue3】【React】获取滚轮位置的方法：JavaScript、Vue 3和React示例
随着Web应用程序的发展，滚轮位置的获取变得越来越重要，可以用于实现页面的滚动效果、导航条的隐藏和显示等功能。本文将探讨在JavaScript、Vue 3和React中获取滚轮位置的不同方法，并提供相应的示例。
2024-02-26 17:26:27
716
原创 【JS】【Vue3】【React】获取鼠标位置的方法：JavaScript、Vue 3和React示例
随着Web应用程序的复杂性不断增加，获取用户交互信息变得越来越重要。其中，获取鼠标位置是一项常见的任务，可以用于实现各种交互效果，如拖拽、悬停提示等。本文将探讨在JavaScript、Vue 3和React中获取鼠标位置的不同方法，并提供相应的示例。
2024-02-26 17:22:35
1309
原创 图片加载缓慢的原因及解决办法
优化图片大小、压缩和优化图片、优化服务器性能、分批加载图片、懒加载、考虑用户网络环境等都是提高页面加载速度的有效方法。
2024-02-26 17:15:08
1758
原创 【Vue3】Composition API与Options API：选择正确的方式组织你的Vue代码
setup() {return {count,increment通过以上示例，我们可以看到的使用方式和有着明显的区别。更灵活、可复用，并且将相关逻辑集中在一起，更易于理解和维护。综上所述，Vue 3的与各有特点和适用场景，了解它们的区别和优劣势，可以帮助你更好地选择合适的方式来组织和管理你的Vue代码。
2024-02-26 17:04:38
645
原创 【JS】substring方法与substr的区别
虽然 substring 和 substr 方法在某些情况下可以互换使用，但它们的参数和行为上存在一些差异。在使用时，需要根据具体需求选择合适的方法，并注意其不同之处，以避免出现意外的结果。
2024-02-22 11:44:15
349
原创 【正则表达式】为那些需要刷新记忆的人准备，不适合新手
字符：除了在正则表达式中具有特殊含义的字符外，所有字符都与自身匹配。例如，正则表达式x匹配子字符串"x"；正则表达式9匹配"9"；正则表达式=匹配"=“；和正则表达式@匹配”@"。特殊正则表达式字符：这些字符在正则表达式中具有特殊含义（将在下面讨论）：., +, *,?转义序列（\char）要匹配正则表达式中具有特殊含义的字符，需要使用带有反斜杠 ( ) 的转义序列前缀。例如，.火柴".“；正则表达式+匹配”+“；和正则表达式(匹配”("。还需要使用正则表达式\来匹配""（反斜杠）。
2024-02-22 11:05:44
811
原创 【TS】toString() 方法与 String() 的区别
toString() 方法是对象上的方法，用于将对象转换为字符串。String()构造函数是用来创建字符串对象的构造函数，它可以将任何类型的值转换为字符串。
2024-02-07 16:53:06
429
原创 【vue】JavaScript 和 TypeScript 数组方法详解
大家都知道，在做前后端交互的时候，后端传回来的数据有很多都是数组类型，那么也必定会有很多复杂的数组操作，你是不是还只会简单的push和forEach？
2024-02-07 14:02:40
416
原创 【TS】parsInt和Number转数字的区别是什么
parseInt()和Number()都是 JavaScript 中用于将字符串转换为数字的函数，但它们之间存在一些关键差异。
2024-02-02 17:53:05
343
原创 【vue】Vuex 与 Pinia：Vue.js 状态管理库对比
Vuex 和 Pinia 都是 Vue.js 的状态管理库，它们都提供了集中式存储和管理应用程序状态的功能。但是，它们在设计和实现上存在一些关键差异。Vuex 采用集中式状态管理的方式，它具有良好的文档和社区支持，并且它与 Vue.js 的集成非常紧密。但是，Vuex 也有一些缺点，例如它相对复杂，并且它可能会导致应用程序的性能问题。Pinia 采用分散式状态管理的方式，它相对简单，并且它不会导致应用程序的性能问题。
2024-02-02 17:31:45
374
原创 【Vue.js】Vue.js 中的 nextTick() 方法
方法在 Vue.js 中是一个非常有用的工具，它允许你在当前事件循环结束后执行某些操作。这对于在 DOM 更新后执行操作非常有用，因为它可以确保在 DOM 更新完成后再执行这些操作。 方法接受一个回调函数作为参数，该回调函数将在当前事件循环结束后执行。回调函数可以接收一个参数，该参数是 Vue 实例。以下是一些使用 方法的示例：
2024-02-01 15:15:39
508
1
原创 【vue3+TS】customRef在实战中的使用（防抖）
customRef用于自定义一个ref，可以显式的控制依赖追踪和触发响应，接受一个工厂函数，两个参数分别用于追踪的track与用于触发响应的trigger，并返回一个带有get和set属性的对象，在实际开发中可以实现。是指在一段时间内，如果同一个函数被多次触发，则只执行最后一次，如果这段时间内没有再次触发该函数则执行一次。频繁触发的事件，如输入框输入时实时搜索，在用户输入时每次都发起请求会造成性能问题，可以用防抖函数实现一定的延迟，等待用户输入完成后再请求。
2023-11-21 21:35:00
194
原创 【vue3】watch与watchEffect的全面用法（一篇就会）
默认初始时不执行回调，但可以通过配置immediate为true，来指定初始时立即执行第一次，通过配置deep为true，来指定深度监听。watchEffect可以不用直接指定要监听的数据，回调函数中使用的哪些响应式数据就监听哪些响应式数据，watch可以监听一个或多个响应式数据，一旦数据变化，就自动执行监听回调。如果监听多个数据，需要使用数组来指定。（主要区别在watch监听的数据上）如果是监听reactive对象中的属性，必须通过函数来指定。没有点击按钮时，显示undefined。
2023-11-21 20:57:05
187
原创 Vue3中computed计算属性的全面用法（简单易懂，一篇就会）
所以在vue3中，如果需要既要循环数据，又要对数据进行筛选，就用到了computed。在vue3版本中，v-if和v-for不能同时使用。computed用于简单的计算。
2023-11-21 19:35:15
2018
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
405
原创 Vue3框架在大规模应用中的性能优化策略
Vue3作为现代前端框架的代表，通过引入片段、静态提升和优化事件处理等手段，进一步提升了虚拟DOM的效率，使得Vue应用在大规模和复杂场景下依然能够保持出色的性能表现。在传统的前端开发中，每次数据发生变化时，都会直接操作真实的DOM。在实际开发中，建议开发团队定期进行性能监测，根据性能监测结果，结合本研究提供的策略，进行有针对性的性能优化，以保持应用的高性能和良好用户体验。Vue3框架作为一种响应式、组件化的前端框架，其性能受到诸多因素的影响，包括组件的复杂度、数据的处理和响应速度、虚拟DOM的使用等。
2023-11-01 21:56:01
181
2
原创 深入探讨Vue 3生命周期钩子及其具体用法
生命周期钩子是Vue组件提供的一组函数，用于在组件的不同生命周期阶段执行特定的代码。这些生命周期钩子可以让您在组件创建、挂载、更新和销毁等关键时刻插入自定义逻辑。Vue 3的生命周期钩子与Vue 2相似，但也有一些重要的变化。Vue 3 提供了一组强大的生命周期钩子和数据监听机制，以帮助您更好地管理组件的生命周期和数据。watch 函数作为 Vue 3 中的一个重要特性，允许您监听数据变化并执行自定义操作。结合生命周期钩子和 watch 函数，您可以构建出高效、可维护的Vue应用程序。
2023-09-16 16:20:44
520
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
141
1
原创 【Python】字典(dict)【方法】完全攻略
其实，说 popitem() 随机删除字典中的一个键值对是不准确的，虽然字典是一种无须的列表，但键值对在底层也是有存储顺序的，popitem() 总是弹出底层中的最后一个 key-value，这和列表的 pop() 方法类似，都实现了数据结构中“出栈”的操作。从运行结果可以看出，由于被更新的字典中已包含 key 为“one”的键值对，因此更新时该键值对的 value 将被改写；列表类型的值来说，此方法对其做的是浅拷贝，也就是说，b 中的 [1,2,3] 的值不是自己独有，而是和 a 共有。
2023-05-11 10:36:49
142
原创 【Python】字典(dict)基本操作
通过 in（或 not in）运算符，我们可以很轻易地判断出现有字典中是否包含某个键，如果存在，由于通过键可以很轻易的获取对应的值，因此很容易就能判断出字典中是否有指定的键值对。字典中各元素的键必须是唯一的，因此，如果新添加元素的键与已存在元素的键相同，那么键所对应的值就会。如果要判断字典中是否存在指定键值对，首先应判断字典中是否有对应的键。需要指出的是，对于 dict 而言，in 或 not in 运算符都是基于 key 来判断的。• value 表示新的值，只要是 Python 支持的数据类型都可以。
2023-05-11 10:21:30
112
原创 【Python】元组(tuple)详解
元组和列表最大的区别就是，列表中的元素可以进行任意修改，就好比是用铅笔在纸上写的字，写错了还可以擦除重写；而元组中的元素无法修改，除非将元组整体替换掉，就好比是用圆珠笔写的字，写了就擦不掉了，除非换一张纸。和列表一样，我们可以使用索引（Index）访问元组中的某个元素（得到的是一个元素的值），也可以使用切片访问元组中的一组元素（得到的是一个新的子元组）。通过对比列表和元组存储方式的差异，我们可以引申出这样的结论，即元组要比列表更加轻量级，所以从总体上来说，元组的性能速度要优于列表。
2023-05-03 10:31:20
8715
原创 【Python】列表（list）的进阶知识
有很多操作函数的功能非常相似。例如，增加元素功能的函数有 append() 和 extend()，删除元素功能的有 clear()、 remove()、pop() 和 del 关键字。
2023-04-23 13:33:37
105
原创 【Python】列表（list）的基础操作
index() 方法用来查找某个元素在列表中出现的位置（也就是索引），如果该元素不存在，则会导致ValueError 错误，所以在查找之前最好使用 count() 方法判断一下。其中，listname 表示列表名称，obj 表示要查找的元素，start 表示起始位置，end 表示结束位置。列表是 Python 序列的一种，我们可以使用索引（Index）访问列表中的某个元素（得到的是一个元素的值），其中，listname 表示列表名字，start 表示起始索引，end 表示结束索引，step 表示步长。
2023-04-23 13:03:05
3055
原创 【Python】Python 能干什么，Python 的应用领域
作为一种功能强大的编程语言，因其简单易学而受到很多开发者的青睐。那么，Python 的应用领域有哪些呢？Python 的应用领域非常广泛，几乎所有大中型互联网企业都在使用 Python 完成各种各样的任务，例如国外的Google、Youtube、Dropbox，国内的百度、新浪、搜狐、腾讯、阿里、网易、淘宝、知乎、豆瓣、汽车之家、美团等等。概括起来，Python 的应用领域主要有如下几个。
2023-04-18 10:39:04
65
原创 【Vue】从开始到企业级的Mixin混入
Mixin混入是Vue中一个非常有用的特性，可以让我们在多个组件中共享相同的逻辑和功能。通过将这些功能提取出来，我们可以减少代码重复，使代码更加可维护和易于理解。
2023-04-02 14:39:08
87
原创 【Vue】初级路由守卫
Vue 的路由守卫可以帮助我们在路由跳转前、后或者离开当前页面前执行一些逻辑。通过使用路由守卫，我们可以实现登录验证、权限控制等功能。
2023-04-02 14:17:53
83
原创 【Vue3响应式】ref、reactive，以及toRefs 函数
Vue3中的ref和reactive都是响应式数据的实现方式。在Vue3中，我们可以使用ref来将基本数据类型包装为一个响应式对象，使用reactive将对象包装为响应式对象。本文将介绍这两种响应式数据的实现方式以及它们之间的区别。 toRefs 函数可以将一个响应式对象转换为一组响应式属性。这个函数可以用于将父组件中的响应式对象传递给子组件，并在子组件中以单独的响应式属性的形式使用它们。
2023-04-01 11:03:41
3965
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人