- 博客(76)
- 收藏
- 关注
RSS订阅原创 【Vue3第二十六章】自定义指令
在中，任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令。在下面的例子中，vFocus即可以在模板中以v-focus的形式使用。将一个自定义指令全局注册到应用层级也是一种常见的做法，这样的话在任何一个组件中都可以调用此全局指令。// 导入 createApp 方法：每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例：// 导入根组件// 通过 createApp() 函数创建一个新的应用实例。
2023-06-01 14:15:32
53
原创 【Vue 第二十五章】自定义指令、权限按钮
在中，任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令。在下面的例子中，vFocus即可以在模板中以v-focus的形式使用。将一个自定义指令全局注册到应用层级也是一种常见的做法，这样的话在任何一个组件中都可以调用此全局指令。// 导入 createApp 方法：每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例：// 导入根组件// 通过 createApp() 函数创建一个新的应用实例。
2023-05-30 13:55:59
89
原创 【Vue3第二十四章】TransitionGroup 列表动画组件
你也可以向你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用，比如安装 animate.css在 main.js 引入在 Transition 组件中使用。
2023-05-27 20:51:58
7
原创 vite3+vue3 项目打包优化三 — CDN加速、文件压缩
内容分发网络（Content Delivery Network，简称 CDN），是构建在数据网络上的一种分布式内容分发网，它可以让用户从最近的服务器请求资源，以提升网络请求的响应速度。：一但依赖网站出现问题，我们的项目也就不行了，建议留下备用方案，以便维护。把打包好的项目放入服务器目录，服务器开启 gzip 服务，这样通过项目地址就可以在浏览器中进行访问了。需要注意的是，浏览器解压也是需要时间的，如果项目体积不是很大的话，不建议采用 gzip 进行压缩
2023-05-24 15:49:19
418
原创 Vue3 面试必备高频知识点
自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。指令钩子及参数详见组件内自定义指令：在中（组合式API），任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令
2023-05-23 13:53:23
350
原创 vite3+vue3 项目打包优化二 —— 依赖分包策略
当值为对象形式时，每个属性代表一个 chunk，其中包含列出的模块及其所有依赖。chunk 的名称由对象属性的键决定。})当该选项值为函数形式时，每个被解析的模块都会经过该函数处理。如果函数返回字符串，那么该模块及其所有依赖将被添加到以返回字符串命名的自定义 chunk 中。以下例子，创建一个命名为vendor的 chunk，它包含所有在中的依赖以下例子，将静态资源分拆打包：将 node_modules 中的代码单独打包成一个 JS 文件。
2023-05-17 17:26:33
464
原创 vite3+vue3 项目打包优化
现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。
2023-05-16 15:22:28
448
转载 Vue 项目多个 axios 请求下 loading 处理
每当一个请求结束， loadingCount 减 1，并判断 loadingCount 是否为 0，如果为 0，则关闭 loading；造成的后果就是页面请求还没完成，loading 却关闭了，用户会以为页面加载完成了，结果页面不能正常运行，导致用户体验不好。假如现在同时发起两个请求，在请求前，拦截器 this.isShowLoading = true 将 loading 打开。这个拦截器的功能是在请求前打开 loading，请求结束或出错时关闭 loading。如果每次只有一个请求，这样运行是没问题的。
2023-05-15 09:52:56
67
原创 Vue 项目利用 HBuilderX 打包 APP 流程
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
2023-05-12 16:10:19
533
原创 JS 中这些冷门但好用的 API，你知道多少？
sendBeacon是异步的，不会影响当前页到下一个页面的跳转速度，且不受同域限制。这个方法还是异步发出请求，但是请求与当前页面脱离关联，作为浏览器的任务，因此可以保证会把数据发出去，不拖延卸载流程。对于ajax在页面卸载时上报，ajax有可能没上报完，页面就卸载了导致请求中断，因此ajax处理这种情况时必须作为同步操作.网站通常希望在用户完成页面浏览后向服务器发送分析或诊断数据，最可靠的方法是在 visibilitychange。在项目中可做"埋点"处理，收集用户的使用习惯和信息数据。
2023-05-12 14:08:19
526
原创 Vite + Vue3 实现前端项目工程化
Vue3 发布至今，周边的生态、技术方案已足够成熟，个人认为新项目是时候切换到 Vite + Vue3 了。今天就给大家操作一下这种技术方案实现前端工程化。
2023-05-10 11:29:46
608
原创 【Vue3 插件篇】GSAP 动画库与 图片预览插件
GSAP（GreenSock Animation Platform）是一个专业的动画库，可以用它完成你想要的各种效果官。viewer.js是一款开源的图片预览插件，功能十分强大
2023-05-09 08:50:53
370
原创 vue-router 在新窗口打开页面
vue的是单页面应用设计的渐进式框架,但是有时在项目中也会出现新窗口打开页面的情况,此时,就需要vue-router的知识来解决。
2023-05-04 10:44:38
81
原创 ES5 新特性一览表
除了正常的运行模式（混杂模式），ES5中添加了第二种运行模式：“严格模式”（strict mode）顾名思义，这种模式，使得JavaScript在更严格的语法下运行"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。
2023-05-04 09:16:31
420
原创 【Vue 移动端开发】适配百分之99的屏幕方案
手淘框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。1334 满天飞的时代，这两句代码确实给开发者带来了很大的方便，这样设置根font-size后，px 和 rem 的转换比例成了100, 为比如UI稿一个长宽分别为 120px。再当我们输入宽度的时候，我就可以看到vscode自动帮我们计算好了对应的rem值，我们只要点击使用就可以了。Node 版本 v14.18.1。
2023-04-25 20:22:25
431
1
原创 24个强大的HTML属性，建议每位前端工程师都应该掌握！
HTML属性非常多，除了一些基础属性外，还有许多有用的特别强大的属性本文将介绍24个强大的HTML属性，可以使您的网站更具有动态性和交互性，让用户感到更加舒适和愉悦。让我们一起来探索这24个强大的HTML属性吧！
2023-04-21 17:11:47
645
原创 Vue项目基于driverjs实现新用户导航
Driver.js 是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。主要的作用是为刚接触应用的新手用户快速了解产品，帮助用户把注意力聚焦到某项功能，从而快速熟悉我们的开发的产品。它没有依赖项，支持所有主要浏览器。
2023-04-20 16:55:28
295
原创 【Cesium 编程第一篇】概述、环境搭建、界面介绍
Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。Cesium 使用 WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebG
2023-04-09 13:45:45
381
原创 lodash-es 工具库
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库，算是从分离出来的超集。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。lodash为了良好的浏览器兼容性，它使用了旧版 es5 的模块语法；而lodash-es则使用了 es6 的模块语法，这让 webpack 之类的打包工具可以对其进行tree shake。
2023-04-04 13:47:23
1570
原创 【项目数据优化三】长列表数据优化
首先我们要知道，虚拟滚动是用到 Vue 的 v-for 实现的，上面也解释了，虚拟滚动是只渲染可视区域，那么我们可视区域的节点内容必然会随着用户的滚动条的改变而改变，假设一个页面就只能显示 n 个节点，那么我们如何让这n个需要变动的节点跟着滚动条动呢？这部分就是最核心的代码了。如上图，当1被卷去的时候(完全离开我们的可视区)，我们就利用css的translateY将它顶下来，渲染成2，你会发现发现在可视区域外多出来了一个节点，为了保证滑动的连贯性，你可以多设置几个冗余节点。答案是肯定的，js为我们提供了。
2023-03-31 14:42:43
82
原创 【高频触发事件优化】封装节流和防抖
最近项目有一个数据导出功能，之前后端都是同步处理，前端做防抖处理，数据量特别大的时候，造成响应时间特别长。这次后端做了优化处理，将后端做了异步处理，响应特别快，但是需要再额外的下载页面去处理导出，这样造成用户下载后直接进入下载页面需要等待一段时间才能看到下载文件，而且对于后端来讲，防抖虽然可以控制频率（默认1s），但是他想要把时间控制在 10s 左右，才能实现二次下载。如果继续使用防抖，如果直接定 10s ，就会造成第一次点击无效的点击，当然这个可以通过一个变量动态控制这个时间，但是稍显麻烦。
2023-03-30 14:18:18
275
原创 Vue3 の 组合式函数
官方给出的解释：“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。这里需要提一下的概念：它只包括了可重用的逻辑 (数据获取、分页等) 而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。大部分能用无渲染组件实现的功能都可以通过组合式 API 以另一种更高效的方式实现，并且还不会带来额外组件嵌套的开销。
2023-03-28 10:25:13
469
原创 【Gitee + Hexo】从0开始搭建自己的博客网站
每一名开发者，都期望有属于自己的技术博客网站，这其中更多的人依赖CSDN、博客园、掘金等去分享技术性文章。本文的目的是带着大家快速搭建一个属于自己的免费博客网站，其实现原理：先用Hexo 把提前写好的 md 文档代码生成静态页面，然后利用码云 pages 这个静态网站托管功能，部署打包好的代码。
2023-03-17 10:21:54
335
原创 【接口请求配置】axios 某个单独接口的个性化配置
现在有这么一个需求：有一个接口耗费时间巨长，网络不好时经常会超时。去改统一设置的超时时间又不太现实，所以想针对这个请求单独设置超时时间。干过前端开发的小伙伴都知道，项目中所有的接口请求都是走统一封装过的 axios，即：全局请求配置。注：这里除了可以单独配置请求超时时间， 其它属性配置也可直接在请求头上添加。
2023-03-13 11:09:17
132
原创 【项目数据优化一】敏感数据脱敏处理
随着信息化发展与数字转型，企业有大量的数据二次利用（secondaryuse）与挖掘需求，为了平衡数据利用与隐私保护（敏感数据保护）问题，数据脱敏——作为一种成熟且应用灵活的数据安全技术，成为当前绝大数企业在数据安全治理与建设过程中的必选技术与措施。
2023-03-12 17:25:34
385
原创 【 Vue3 性能优化】页面加载性能 与 更新性能
Vue 在大多数常见场景下性能都是很优秀的，通常不需要手动优化。然而，总会有一些具有挑战性的场景需要进行针对性的微调。
2023-03-08 10:56:41
822
原创 【JS 经典面试题】全局变量和局部变量
JS中最经典的全局变量和局部变量问题1 var a = 10;2 function test(){3 a = 100;4 console.log(a);5 console.log(this.a);6 var a;7 console.log(a);8 }9 test();解析：Javascript在执行前会...
2023-03-06 17:00:44
120
原创 【JS代码优化一】分支优化篇
序：如何让代码看起来更优雅？代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息（状态）、表达相关的情绪（函数），所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系列笔记的目的，就是带着大家如何实现更有效、更优雅的编程。笔记涵盖：运算符、流程语句、设计模式、ES6 新增方法等多个方面。
2023-03-06 12:48:24
320
原创 【Vu3 测试篇】自动化测试
自动化测试能够预防无意引入的 bug，并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的 Vue 应用。与任何应用一样，新的 Vue 应用可能会以多种方式崩溃，因此，在发布前发现并解决这些问题就变得十分重要。他们可能会模拟你的应用环境的很大一部分（如初始状态、复杂的类、第三方模块和网络请求）。如下，对纯 JavaScript/TypeScript 模块中的函数进行断言，看其是否返回期望的值。一般来说，单元测试将捕获函数的业务逻辑和逻辑正确性的问题。
2023-03-02 16:12:53
531
原创 【极狐 GitLab】在 web 端合并分支
极狐GitLab是GitLab DevOps平台的中国发行版，一套完备的一站式DevOps平台，从根本上改变了开发、安全和运维团队协作和软件构建方式。极狐GitLab从构思到生产发布，帮助团队提高生产效率，将迭代周期从数周缩短至几分钟，加快软件创新发布速度，节省开发成本。
2023-02-28 10:20:53
445
原创 【Vue3第二十二章】KeepAlive缓存组件
有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到组件。开启生命周期的变化。
2023-02-27 21:10:39
1743
原创 【Vue3 第二十一章】Teleport组件传送
有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。
2023-02-27 20:58:46
320
原创 【moment.js】时间格式化插件
用于在JavaScript中解析，验证，操作和显示日期和时间。是一款在项目中使用频率极高的时间格式化工具，Ant Design Vue 组件中就是使用它来处理时间的。
2023-02-26 17:08:06
213
原创 【Vue3 第二十章】异步组件 & 代码分包 & Suspense内置组件 & 顶层 await
在大型项目中，我们可能需要拆分应用为更小的块，以减少主包的体积，并仅在需要时再从服务器加载相关组件。这时候就可以使用异步组件。Vue 提供了方法来实现此功能，这个方法接收一个返回 Promise 的加载函数。ES 模块动态导入会返回一个 Promise，所以多数情况下我们会将它和搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)，因此我们也可以用它来导入 Vue 单文件组件。
2023-02-25 18:12:42
708
原创 Array.apply(null,{length: 99}) 逻辑解析
这个表达式Array.apply(null, { length: 20 })有点让人费解。第一感觉这个表达式就是为了创建一个长度为20的数组，但表达式Array(20)也可以实现这个功能啊，为啥非要写那么复杂呢？})# apply 模式length: 99})# Array 参数模式控制台输入：那么按照刚刚的理解，把代码换成这个样子应该是没有问题的。
2023-02-23 15:08:45
208
原创 【Ant Design Vue V3版本填坑记录三】一套代码实现表格常用属性
V3版本官方升级提醒：Table 废弃了 column.slots, 新增 v-slot:bodyCell、v-slot:headerCell，自定义单元格，新增 column.customFilterDropdown v-slot:customFilterDropdown，自定义筛选菜单，新增了 v-slot:customFilterIcon 自定义筛选按钮，但 column.slots 还可用（实际测试2.X版本也会出现控制台警告，上一篇文章已经说过），我们会在下一个大版本时移除。
2023-02-14 17:31:52
714
原创 【Ant Design Vue V3版本填坑记录二】Table 组件 column.customRender 报错
customRender 生成复杂数据的渲染函数
2023-02-12 15:12:08
401
原创 【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错
and3 table 即将废除 slots 写法
2023-02-12 14:16:14
585
微信小程序之防饿了么点餐系统
2023-03-09
vue3 表格组件封装复用
2023-02-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人