- 博客(39)
- 收藏
- 关注
RSS订阅原创 【前端框架】Vue 3 实现垂直居中的方式（一）
在前端开发中，实现元素的垂直居中是一个常见且具有一定挑战性的需求。在 Vue 3 项目里，结合 HTML、CSS 及 Vue 3 的特性，有多种方法可以实现元素的垂直居中。下面将详细介绍5种常见的实现方式，并给出相应的代码示例。
2025-02-21 04:15:00
1260
原创 【VUE面试】Vue2和Vue3的diff算法中，key的作用分别是什么？
在 Vue2 和 Vue3 的 Diff 算法里，`key` 都起着关键作用，但由于两个版本的 Diff 算法实现有所不同，`key`的具体作用和使用场景也存在一些差异。以下详细介绍：
2025-02-20 14:30:48
701
原创 【VUE框架】深入剖析 Vue2 与 Vue3 的 Diff 算法区别
在前端开发中，Vue 作为一款流行的 JavaScript 框架，以其高效的数据驱动和响应式特性受到广泛青睐。Diff 算法是 Vue 实现高效更新 DOM 的核心机制之一，它通过比较新旧虚拟 DOM（Virtual DOM）树的差异，只更新需要更新的真实 DOM 节点，从而减少不必要的 DOM 操作，提高性能。Vue2 和 Vue3 在 Diff 算法上存在显著的差异，本文将从基础概念出发，结合代码示例，详细剖析两者的区别。
2025-02-20 14:20:13
555
原创 【VUE3】Vue 3 中列表排序：单字段与多字段排序实现方案
在前端开发中，对数据列表进行排序是一个常见的需求。在 Vue 3 里，我们可以方便地实现根据单个字段或者多个字段对列表进行排序。本文将深入探讨如何在 Vue 3 中完成这些排序操作，涵盖组合式 API 和选项式 API 两种实现方式，并详细解释其中的原理。
2025-02-18 17:54:35
10323
1
原创 【前端面试】在Vue3中，beforeMount和mounted钩子函数有什么区别？
在 Vue 3 里，`beforeMount` 和 `mounted` 是两个重要的生命周期钩子函数，它们在选项式 API 和组合式 API 中都有对应的使用方式。下面从触发时机、可用资源、使用场景等方面详细介绍它们的区别：
2025-02-16 17:20:26
5077
原创 【面试】在Vue3中，beforeCreate和created钩子函数有什么区别？
在 Vue 3 里，`beforeCreate` 和 `created` 这两个钩子函数在选项式 API 中依然存在，不过在组合式 API里有了不同的体现方式。下面为你详细介绍它们的区别：
2025-02-16 17:18:01
784
原创 【前端框架】Vue 3组件生命周期钩子的使用场景
在 Vue 3 中，组件生命周期钩子分为选项式 API 和组合式 API两种使用方式。这些钩子在组件的不同阶段被触发，开发者可以利用它们在特定时间点执行相应的操作。以下是详细介绍各生命周期钩子及其使用场景：
2025-02-16 17:05:45
5391
原创 【前端框架】深入Vue 3组件开发：构建高效灵活的前端应用
Vue 3作为一款流行的前端框架，其组件化系统是构建大型应用的核心。通过将应用拆分为多个可复用的组件，不仅能提高代码的可维护性与复用性，还能让开发团队进行高效的协作。本文将深入探讨Vue 3组件开发的各个方面，帮助开发者更好地掌握这一强大功能。
2025-02-14 14:48:23
1155
原创 【前端框架】Vue3 中 `setup` 函数的作用和使用方式
在 Vue 3 里，`setup` 函数是组合式 API 的核心入口，为开发者提供了更灵活、高效的组件逻辑组织方式。以下为你详细介绍其作用和使用方式：
2025-02-14 14:44:11
773
原创 【前端框架】vue2和vue3的区别详细介绍
Vue 3 作为 Vue 2 的迭代版本，在性能、语法、架构设计等多个维度均有显著的变革与优化。以下详细剖析二者的区别：
2025-02-14 11:24:52
3001
原创 Vue3 从入门到精通：全面掌握前端框架的进阶之路
Vue.js 是一款流行的 JavaScript 前端框架，用于构建用户界面。Vue3 作为 Vue.js 的重大升级版本，带来了诸多性能提升和新特性。它采用了 Proxy 实现数据响应式系统，优化了虚拟 DOM 算法，使得应用在运行时更加高效。同时，Composition API 的引入为组件逻辑复用和代码组织提供了更灵活的方式，让开发者能够更优雅地处理复杂业务逻辑。
2025-02-14 11:21:03
1448
原创 【Three.js】Three.js中的纹理—图像应用和属性调整
Three.js中的纹理功能为我们创造出更加真实和生动的3D场景提供了强大的工具。通过将图像作为纹理应用到几何体上，并调整纹理的属性，我们可以实现丰富多样的视觉效果，为用户带来更好的交互体验。对于那些对于创造逼真图形和动画的开发者和设计师来说，Three.js中的纹理功能无疑是一个不可或缺的重要组成部分。
2023-07-25 17:03:32
5215
86
原创 【Three.js基础入门】：Three.js中的灯光
在Three.js中，灯光是为了让3D场景更加真实和逼真而存在的。灯光可以用来模拟现实中的光照效果，例如阴影、反射和折射等。在本文中，我们将介绍Three.js中的不同类型的灯光，以及如何在场景中添加和调整它们的属性。
2023-07-21 17:47:19
3343
7
原创 【Three.js基础入门】：创建你的第一个3D场景
Three.js是一种强大的JavaScript库，用于在Web浏览器中创建交互式的3D图形和动画。无需熟练的图形编程经验，你也可以通过Three.js轻松地构建令人惊叹的3D场景。本文将带你逐步学习如何入门Three.js，从创建一个简单的3D场景开始。并且在文末还提供两个3d星空效果
2023-07-21 16:02:29
4078
1
原创 【VUE】解决VU2项目图片视频加载缓慢/首屏加载白屏的问题
前端项目中，有时候会出现图片视频加载缓慢、首屏加载白屏的问题之前写了一篇在VU3项目中的解决方案，现在讲一下在 Vue2 项目中的解决方法，方法思路都差不多，在代码示例上会有一些小差别。
2023-07-17 13:25:10
7091
32
原创 【VUE】解决图片视频加载缓慢/首屏加载白屏的问题
在 Vue3 项目中，有时候会出现图片视频加载缓慢、首屏加载白屏的问题,文中会介绍几种解决方案，希望可以帮到你
2023-07-13 17:28:36
39088
69
原创 【架构设计】高并发架构实战：从需求分析到系统设计
高并发是指系统在同一时间内处理的请求量非常大，通常是指每秒处理的请求量达到数千到数百万级别。在互联网应用中，高并发是一个非常常见的问题，因为随着用户数量的增加，系统需要处理的请求量也会越来越大。高并发的处理需要系统在短时间内处理大量的请求，因此对系统的稳定性和性能提出了很高的要求。
2023-07-11 18:01:58
14917
156
原创 【活动】如何在工作中管理情绪
近期发生的新闻热点再度引发公众对稳定情绪和心理健康的关注。有时候我们遇到的最大的敌人，不是运气也不是能力，而是失控的情绪和口无遮拦的自己。如何在工作中保持稳定的情绪？谈谈我的看法。
2023-07-07 14:00:06
4836
25
原创 【ECharts系列】ECharts 鼠标悬停线格式化
在这个回调函数中，依然将时间戳转换为Date对象，然后使用getHours()、getMinutes()和getSeconds()方法获取时分秒数值，最后使用字符串拼接的方式将它们组合成"时:分:秒"的字符串格式。通过类似以上示例代码的方式，可以将ECharts折线图的X轴时间戳格式化为任意指定的时间格式，并在鼠标悬停时显示友好的引导线，同时引导线上的数据值也被格式化为指定的时间格式。折线图有很多数据，鼠标悬停时，针对X轴，Y轴数据进行格式化，例如X的时间戳，格式化为时分秒，Y轴保留两位小时。
2023-07-07 13:18:53
10773
44
原创 【ECharts系列】ECharts 图表渲染问题&解决方案
echats 渲染，第一次的时候只出现Y轴数值，不出现X轴数值，切换下页面，X轴数值就能出现。
2023-07-07 10:42:04
16390
65
原创 关于vue2停止维护，vue3迭代更新的思考：
Vue3是Vue的下一个主要版本，它具有比Vue2更好的性能和更多的功能，包括更快的渲染速度，更好的TypeScript支持，更好的组件化开发体验，更好的Tree-shaking支持等等。Vue 3.0.0 这是 Vue 3 的正式版本，它包含了许多新特性和改进，例如更好的性能、Composition API 和 Fragments。总的来说，Vue3相比Vue2有很多的改进和新增功能，能够带来更好的开发体验和更高的性能，但也需要一定的学习成本和适应期。这种缓存机制可以提高组件的性能，减少不必要的渲染。
2023-04-10 17:17:22
15848
1
原创 CSS 小技巧：纯Css实现hover默认高亮显示
很多人的第一反应是用js来控制样式，如果css能实现的功能，就没必要使用js啦，这里主要涉及css的。2.鼠标移出列表后仍然保留上一次的选中状态；在vue项目中，可以参考一下demo。3.默认列表的第一项为选中状态；1.鼠标滑过触发选中状态；
2023-04-10 16:55:08
11771
1
原创 Three.js入门之-入门前的了解
Three.js中的场景是一个物体的容器，开发者将需要的物体放入场景中。相机的作用就是指向场景，在场景中取一个合适的景，把它拍下来。渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。在定义了场景中的物体，设置好的照相机之后，渲染器就知道如何渲染出二维的结果了。这时候，只需要调用渲染器的渲染函数，就能使其渲染一次了。
2023-04-10 16:48:33
9178
原创 【Minio上传】-大文件分片上传、断点续传✍️
minio上传、断点续传、分片上传前端支持批量上传，并将获取的文件进行获取，然后自动请求预签名接口；后端生成presigned url（预签名url，里面包含上传到AWS S3所需要的一些认证标识信息）以及每个的partSize和currentNumber给到前端，前端通过这个URL，以及大小将文件分片上传到minio服务上，具体切片处理： 循环请求模块的代码，代码上传完成后根据请求的requist的coinfig里面的链接参数中的partNumber来判断当前
2022-12-13 14:57:00
9493
2
原创 vue3+阿里乾坤实现主应用和微应用
qiankun 是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用，在易用性及完备性上，绝对是值得信赖的。
2022-10-23 20:08:17
13755
17
原创 vue中使用element-ui表格table组件错行出现场景和解决方案
在项目开发中表格错行的问题经常出现，现在整理如下，希望共同学习进步1.element-ui表格table表格内容错行： 1.情况一：表格中有el-tooltip时候，数据过长的时候hover，往上滑动会出现错行，【解决方案：固定高度或者给出:max-height；】；2.情况二：表格中使用css文本的溢出显示省略号没有固定宽度的时候，往上滑动会出现错行，【解决方案：固定宽度度或者给出:max-width；】；3.情况三：表格行的数据发生变化，往上滑动会出现错行【监听doLayout】；
2022-02-09 17:18:31
13420
5
原创 css省略、Css实现单行、多行文本溢出显示省略号 …以及H5常见省略场景
#####场景一：对文案显示字数没有要求:直接css控制省略单行文本的溢出显示省略号//一行省略.one-line{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap}//两行省略.two-line{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //元素显示的文本的行
2022-02-09 16:39:42
9722
2
原创 vue用vue-cli如何创建自己的项目以及手动安装勾选配置
vue利用脚手架创建自己的项目npm uninstall vue-cli -g //全局安装脚手架vue -V //查看自己的vue版本号vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。一、cnpm instal -g @vue/cli (一次全局安装sudo)cnpm install -g @vue/cli -g @vue\n
2020-12-01 22:03:58
10264
1
原创 如何用js实现日期天数、时分秒的倒计时
js实现天数倒计时在用js实现倒计时的时候，可以先算出截止日期和今天之间相差的毫秒数，然后进行相应的比例进行day、 month 、hour、minute、second的计算，便可以准确的计算出相差的时间。倒计时格式为：纯天数倒计时function CountDown(year, month, day, hours) { let now = new Date(); let endDate = new Date(year, month - 1, day, hours);
2020-11-24 21:42:42
16621
2
原创 CSS实现水平、垂直居中的6种方式
1.块级元素和行内元素2.水平居中和垂直居中3行内元素的水平居中 1.table 2.设置line-height 3.text-align:center 4.margin:0 auto; 5.绝对定位 6.flex弹性盒模型 7.calc 8.auto<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2020-11-22 23:18:53
11340
10
原创 vue-解决弹出蒙层滑动穿透问题
vue-解决弹出蒙层滑动穿透问题遇到的问题】在一个可滑动列表页弹出一个全屏蒙层，蒙层固定，中间一块显示消息框，当用手滑动蒙层空白处时，滑动事件会穿透到底部列表页，导致列表页的滑动。【要实现的目标】1. 滑动蒙层空白处不让滑动事件穿透。2. 当蒙层消息框文字多时，要让文字可上下滑动。 【实现思路】1. vue提供的 @touchmove.prevent 可以用来阻止滑动，但是这个方法会对其内的子div的滑动事件也禁止掉了，这样会导致中间文字无法滑动。如果没有中间滑动需求，用 @touchmov
2020-11-22 20:28:15
8666
2
原创 swiper常用属性
swiper常用属性swiper版本号：3.1.0 direction: 'vertical', //轮播方向，默认是水平滑动horizontal spaceBetween: 5, //在slide之间设置距离（单位px），默认是0 slidesPerView: 1, //设置slider容器能够同时显示的slides数量,默认是1。 loop:true,//loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 loop模式在与f
2020-11-22 20:15:13
11897
1
原创 安卓和ios移动端实现H5页面进行强制刷新
安卓和ios移动端实现H5页面进行强制刷新定义和用法onpageshow 事件在用户浏览网页时触发。onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则
2020-11-21 22:28:52
14317
7
原创 解决vue-awesome-swiper点击事件失效的问题 ===“版本号（vue-awesome-swiper“: “^3.1.0）
解决vue-awesome-swiper点击事件失效的问题 ===“版本号（vue-awesome-swiper”: "^3.1.0）最新做项目使用了 vue-awesome-swiper（3.1.0版本）轮播插件遇到的坑。在使用loop: true模式下： 动态循环数据 ，轮播第一遍是点击事件是正常的，轮播第二遍的时候点击事件就失效了 点击事件不起作用 通过查看api , loop模式下会在slides前后复制若干个 slide 但是这个复制只是针对 dom 元素不会带上之前的绑定事件的 ,
2020-11-21 21:53:32
12003
4
原创 如何CSS-画0.5px的线，解决IOS移动端兼容性问题
**如何CSS-画0.5px的线，解决IOS移动端兼容性问题##**设计师在做设计图的时候都是以iphone6（宽为750物理像素）为基准进行设计的。iphone6的设备像素比（即css像素与物理像素的比例）是2，所以设计师在设计图画了边框为1px的box的时候，相对于css代码来说就是0.5像素。如果用css直接设置边框为0.5px，这种情况下iPhone可以正常显示，但是android下几乎所有的浏览器都会把0.5识别为0，即无边框状态，所以这种方式行不通的。在这里插入代码片<!DOCTY
2020-11-21 20:51:28
8902
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人