- 博客(83)
- 收藏
- 关注
RSS订阅
原创 Vue 国际化之 vue-i18n 的使用
Vue 国际化之 vue-i18n，使用起来很简单。vue2、vue3 版本都在这儿，还有一些踩坑记录。
2022-09-03 18:37:40
31225
11
原创 下班前几分钟，我彻底弄懂了这5种for循环的差异
目录前言正文一、角色介绍1、for2、forEach3、map4、for in5、for of二、使用差异1、场景差异2、能力差异三、性能比较四、使用建议前言for循环 在平时开发中使用频率很高，因为你在编码时避免不了对数据进行处理，而处理数据中的常用方式便是对数组或对象等进行遍历，此时 for循环 便无法缺席。某天，下班前几分钟，我对几种常用的 for循环 在使用场景与运行性能等方面进行了简要对比。正文本文主要介绍了5种常用 for循环：
2022-03-04 21:23:02
12185
63
原创 下班前几分钟，我弄懂了Nginx
目录Nginx 的介绍Nginx 的产生Nginx 的用途关于代理正向代理反向代理项目场景负载均衡Web 服务器对比Nginx 的介绍Nginx 是一款是由俄罗斯的程序设计师 Igor Sysoev 所开发高性能的 Web 和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。在高连接并发的情况下，Nginx 是 Apache 服务器不错的替代品。Nginx 的产生Nginx 与 Apache 一样都是一种 Web 服务器。基于 R
2022-02-16 20:27:16
24321
67
原创 15个 Vue 技巧，开发有段时间了，才知道还能这么用（你所知道真的包括这些吗？）
目录前言1、将一个 prop 限制在一个类型的列表中2、使用引号来监听嵌套属性3、知道何时使用 v-if4、单个作用域插槽的简写5、将局部和全局的 style 混合在一起6、重写子组件的样式7、如何在 Vue 之外创建一个具有响应性的变量8、v-for 中的解构9、在指定范围内循环10、窃取 prop 类型11、检测元素外部(或内部)的单击12、从组件外部调用一个方法13、监听数组和对象14、template 标签的另一个用途15、处理错误（和
2021-12-29 21:06:28
15459
41
原创 Vue 常见面试题汇总（这些技巧你真的都掌握了吗？呕心沥血2w字整理）
前言本文汇总了vue常用知识点与常见面试题，附上本人对该vue知识介绍相关博客，适合收藏，经常回顾，也许每次阅读都会有进一步理解。Vue 的优缺点优点1、创建单页面应用的轻量级Web应用框架2、简单易用3、双向数据绑定4、组件化的思想5、虚拟DOM6、数据驱动视图7、前后端分离缺点1、Vue在开发多页应时不够灵活，需要配置多入口2、不支持IE8SPA的理解SPA是Single-Page-Application的缩写，翻译过来就是单页应用。在WE..
2021-12-26 20:43:06
12438
34
原创 Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
前言我们知道，网页展示就好比一个个盒子堆叠在一起，通过调整盒子的大小、位置、样式等，形成了各式各样的页面。当我们在开发一个页面的时候，我们常规的做法可能是：搭建框架、划分区域、定制排版、调整位置、嵌入内容、微调与增添样式。今天所介绍的是基础且关键的一环--布局排版。其中，展开布局中常用的技术：Flex布局。Flex布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box {
2021-12-11 13:52:51
41410
24
原创 Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）
Vue中的插槽（slot）在项目中用的也是比较多的，今天就来介绍一下插槽的基本使用以及Vue版本更新之后的插槽用法变化。感谢大家支持，该版本为优化版，文章重新排版，优化阅读体验。
2021-11-30 21:47:14
64053
88
原创 如何写出易于维护的Vue代码（踩坑经验）
在开发时你心里是否在想着：把功能实现就行了！如果是，那么该文章比较适合你。如何写出易于维护的代码？看了就知道。
2022-07-30 09:08:28
1651
3
原创 “前端工程化”到底是何方神圣？
作为前端工程师，前端工程化是经常听到的概念，但虽然经常听到，很多人对它的认识依然很模糊。比如，提到前端工程化，他并不能说出什么是前端工程化。给出一门具体的技术，他也不能确定是不是属于工程化范畴的技术。这是因为他没有对前端工程化有一个概念上的认识。那么，这篇文章我们就来给前端工程化下个定义吧。............
2022-07-27 20:53:24
904
4
原创 『需求优化』使用 postMessage 解决 localStorage 跨域问题
postMessage() 用于安全地实现跨源通信。记录一次真实项目需求优化。
2022-07-21 21:39:08
1311
8
原创 下班前几分钟，Express 快速入门
基于Node.js平台，快速、开放、极简的 Web 开发框架。Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。
2022-07-20 21:03:43
1289
10
原创 微前端之 qiankun 入门、上手、实战（构建大型 web 应用）
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构具备以下几个核心价值：技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权，独立开发、独立部署，微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新。增量升级，在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略。独立运行时，每个微应用之间状态隔离，运行时状态不共享。.........
2022-07-16 21:55:07
8702
39
原创 收下这份Mock，极速与后端联调，提升效率不止亿点点
试想一下，只要我们开发完一个页面就立马进行联调然后进行调整，不仅时间充足，还能减少bug产生，整个人在一个轻松的状态下开发，代码质量也提高了。今天的主角 Mock 就可以帮助我们解决这个窘境。...
2022-07-09 18:03:22
1403
12
原创 5个 Chrome 简单实用的调试功能，助你提升工作效率
你是否还停留在F12打开控制台查看log、查看元素或者打断点阶段？其实 Chrome的强大功能远远不止于此。以下我将结合实际业务开发场景，为大家整理了一些在日常开发中可以帮助大家提高效率但又不容易被发掘功能。...
2022-07-08 21:50:22
1727
8
原创 这3个高级前端常用的API，有你正在用的吗？
介绍三个高级前端常用的API，getComputedStyle()，getBoundingClientRect()，requestAnimationFrame()，快来看看有你正在用的吗？
2022-07-05 20:43:58
1443
10
原创 Vue2.7正式发布，终于可以在Vue2项目中使用Vue3的特性了，真香~
目录前言正文一、向后移植的功能二、与 Vue3 的差异三、项目升级四、后续支持总结尽管现在 Vue3 是默认版本，但还有许多用户、相关库、周边生态使用的是 Vue2，且由于依赖兼容性、浏览器支持要求或没有足够的带宽升级，导致不得不继续使用 Vue2。难道 Vue3 发布了这么多“真香”的特性，我们 Vue2 的用户与项目就只能眼巴巴地看着？当然不是！有一个好消息是，前两天 Vue2.7 正式发布了。在此版本中，从 Vue3 向后移植了一些最重要的功能，以便 Vue2 用户也可以从中受益。在 Vue2.7 中
2022-07-02 12:53:53
20548
31
原创 ECMAScript 2022 正式发布，有你了解过的吗？
目录前言正文一、总览二、详述1、Top-level await（顶层 await）2、Object.hasOwn()3、at()4、error.cause5、正则表达式匹配索引6、类总结2022年6月22日，第123届 ECMA 大会批准了 ECMAScript 2022 语言规范，这意味着它现在正式成为标准。下面就来看看 ECMAScript 2022 有哪些新特性，是否有你了解过的。1、Top-level await（顶层 await）2、Object.hasOwn()3、at()4、error.cau
2022-06-29 22:08:28
1652
19
原创 下班前几分钟，我弄清了v-model与.sync的区别
目录前言正文一、v-model1、作用2、本质3、特殊用法二、.sync1、作用2、本质总结一、v-model 与 .sync 的区别1、相同点2、区别点在平时开发过程中，v-model 使用频率很高。一般来说，v-model 可用于在表单及元素上创建双向数据绑定，其本质是语法糖。但提到语法糖，这里就不得不提另一个与 v-model 有着相似功能的双向数据绑定语法糖，那就是 .sync 修饰符。使用过 vue 框架的朋友应该对这个指令不会感到陌生，v-model 可用于对 、及 等元素上的数据进行双向绑定
2022-06-26 11:59:42
1113
8
原创 面试官：你为什么要使用flex布局?
在面试的时候，当面试官问我们为什么要使用flex布局的时候，首先我们得先明白一点，问这个问题面试官到底想要了解什么？简单的回答”好用“肯定是不行的，任何方案和技术的出现都是为了弥补之前的缺陷，所以相比传统的布局方案存在的痛点，flex布局肯定有存在的优势和价值。所以接下来我们得说传统的布局是怎样的形式，然后使用了flex布局又是什么样的形式。布局的传统解决方案，基于盒子模型，依赖 display，position，float 等属性。它对于那些特殊布局非常不方便。比如，垂直居中就不容易实现。我们可能
2022-06-08 09:44:37
1046
3
原创 get请求传参长度的误区、get和post请求在缓存方面的区别
误区：我们经常认为get请求参数长度存在限制，而post请求参数长度是无限制的。实际上 HTTP协议 从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:1、HTTP协议 未规定 GET/POST 的长度限制2、GET的最大长度限制是因为浏览器和web服务器限制了URI的长度3、不同的浏览器和web服务器，限制的最大长度不一样4、要支持IE，则最大长度为2
2022-06-06 16:45:36
548
原创 两分钟掌握vue props高级用法
props校验普通格式props: ["propA", "propB"]，没有类型检查。高阶格式props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true ...
2022-06-02 11:02:50
323
1
原创 JavaScript中遍历对象的方法，你掌握了几种？
目录前言正文定义对象for…in…Object.entries()/Object.keys()/Object.values()Object.getOwnPropertyNames(targetObj)Object.getOwnPropertySymbols(targetObj)Reflect.ownKeys(targetObj)总结前言对象是 JavaScript 中一种非常常用的数据类型，由一个个属性名和属性值一 一对应的键值对组成。在实际开发中，我们经常需要.
2022-05-24 20:28:36
6061
4
原创 下班前几分钟，我用几行代码搭建了个 Vue3 项目
目录前言正文一、项目初始化二、引入UI框架三、引入路由 Vue-Router四、引入状态管理器 Vuex五、引入 Axios六、总结前言如今，Vue3 已成为 Vue 的默认版本。相信现在有很多人在用 Vue3 开发项目，但是很多时候没有机会从零开始搭建一个项目，毕竟只有相关负责人才有可能有机会将框架搭建出来，之后我们在此基础上进行业务迭代、模块开发。下班前几分钟，从零搭建一个 Vue3 最小原型系统，麻雀虽小，五脏俱全。正文一、项目初始化既然想搭建一个
2022-03-17 13:30:56
5058
29
原创 下班前几分钟，我弄懂了 type 与 interface 的区别
目录前言正文一、基本概念1、type（类型别名）2、interface（接口）二、相同之处1、都可以用来定义对象和函数2、都可以实现继承三、不同之处1、type 可以做到而 interface 不能做到2、interface 可以做到而 type 不能做到四、使用建议前言在 TypeScript 中，type 和 interface 这两个概念比较容易混淆，它们都可以用来表示 接口，但是在实际使用上会存在一些差异。本文主要对二者的区别进行简述，希望能够
2022-03-14 15:58:00
9731
16
原创 搬砖随笔——JavaScript代码简洁之道
目录1、通过条件判断给变量赋值布尔值2、判断数组长度不为零3、使用 includes 简化条件判断4、使用 some 判断是否有满足条件的元素5、使用 forEach 遍历数组，不形成新数组6、使用 filter 过滤原数组，形成新数组7、使用 map 对数组中所有元素批量处理，形成新数组8、解构数组交换变量9、解构对象10、字符串拼接使用 ${}1、通过条件判断给变量赋值布尔值// badif (a === 'a') { b = true;}
2022-03-10 21:43:23
1164
9
原创 下班前几分钟，我彻底弄懂了前端缓存
前言前端缓存，这是一个老生常谈的话题，也常被作为前端面试的一个知识点。下班前几分钟，我回顾了一下其基本内容。正文分类前端缓存分为强缓存和协商缓存两种。强缓存强缓存主要使用 Expires、Cache-Control 两个头字段，当二者同时存在时 Cache-Control 的优先级更高。当命中强缓存时，客户端不会再发送请求，而是直接从缓存中读取内容，并返回 HTTP 状态码200。Expires响应头，代表该资源的过期时间。是一个 GMT 格式的标准时间。当客户端向服务器
2022-02-28 21:11:40
1908
19
原创 下班前几分钟，我学会了如何使用 Vuex
目录前言正文一、基本概念二、项目场景三、如何使用1、安装2、State 初始值3、Getters 修饰值4、Mutations 修改值5、Actions 异步修改值四、总结五、建议何时使用 Vuex ？前言本人曾对 Vuex 作过详细介绍，但是今天去回顾的时候发现文章思路有些繁琐，不容易找到重点。于是，在下班前几分钟，我对其重新梳理了一遍。tips：本文的案例均为Vue2版本。正文一、基本概念Vuex 是一个专为 Vue.js
2022-02-24 21:13:06
6162
22
原创 下班前几分钟，我彻底弄懂了 undefined 和 null 的区别
目录前言一、基本概念1、undefined2、null二、简单区别三、表现形式1、typeof2、== 与 ===3、Object.prototype.toString.call4、+ 运算 与 Number()5、JSON.stringify6、let undefiend = 'test'四、建议前言undefined 和 null 的区别是个老生常谈的话题了，之前我对二者的区别只是简单理解，例如二者转成 Boolean 类型都是 false、使
2022-02-20 20:25:11
14100
25
原创 在 Vue3 成为默认版本后，盘点了 Vue3 与 Vue2 的区别
目录前言正文一、Vue3 与 Vue2 区别概览二、Vue3 与 Vue2 区别详述生命周期多根节点Composition API异步组件（Suspense）Teleport响应式原理虚拟DOM事件缓存Diff算法优化打包优化自定义渲染APITypeScript支持三、Options API 与 Composition APIOptions APIComposition API如何选择？展望前言不知道大家有没有留意到
2022-02-13 12:36:23
6611
31
原创 30+个 JavaScript 知识点汇总，你都了解了吗？
前言无论你是已经在工作岗位上亦或是正在寻求新的工作机会，掌握常见的 JavaScript 面试知识点，不但可以帮助你扩展知识面、培养逻辑思维，还能帮助你提升自己的工作能力。不妨看看，也许有你所不了解的。正文1、JavaScript 的数据类型及其存储方式截止目前，JavaScript 一共有8种数据类型，可大致分为基本数据类型（也叫原始数据类型）与引用数据类型基本数据类型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值
2022-02-10 17:17:09
8697
19
原创 下班前几分钟，我彻底弄懂了JavaScript的原型与原型链
前言JavaScript 原型与原型链历来都是面试的重点，也是难点，理解起来没有那么容易。正文理解原型的几个要点，能更容易理解原型这个概念：1、所有的引用类型（数组、对象、函数）可以自由扩展属性（除null以外）；2、所有的引用类型都有一个“__proto__”属性(隐式原型，是一个对象)；3、所有的函数都有一个“prototype”属性(显式原型，是一个对象)；4、所有引用类型的“__proto__”属性指向它的构造函数的“prototype”属性；5、当访问一个对象的属性
2022-01-27 20:20:36
7158
25
原创 Pinia 上手指南 -- 新一代状态管理工具，它会成为 Vuex 的良好替代品吗？
一、简介Pinia 是 Vue 的存储库，它允许你跨组件/页面共享状态。如果你熟悉 Composition API，你可能已经使用过简单的export const state = reactive({})，这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，则会将你的应用程序暴露给安全漏洞。即使在小型单页应用程序中，你也可以从使用 Pinia 中获得很多好处：开发工具支持 跟踪动作、突变的时间表 store只出现在使用它们的组件中 时间旅行和更容易的调试 热模块更...
2022-01-24 21:16:18
4737
17
原创 尤雨溪：Vue3 将在2022年2月7日成为新的默认版本（你准备好了吗？）
划重点：Vue 3 将在 2022 年 2 月 7 日成为新的默认版本！请务必阅读可能需要采取的措施部分，来确认你是否需要在默认版本切换之前做相应改动以避免发生异常。从库到框架在最开始的时候，Vue 仅仅是一个运行时库。但这些年来，它已经逐步发展成了一个包含许多子项目的框架： 核心库，即vuenpm 包 内容足够当作一本书的文档 构建工具链（Vue CLI、Vue Loader 和其他支持包） 用于构建单页应用的路由 Vue Router 用于状..
2022-01-21 19:48:14
1743
10
原创 2022 JavaScript 数组（Array）方法1w+字汇总（含数组新特性，全到没朋友，再也不用东拼西凑了）
目录前言创建数组字面量方式构造函数方式Array.of 方式Array.from 方式数组方法返回新数组concat()join()slice()map()filter()toLocaleString()toString()flat()flatMap()entries()keys()values()改变原数组push()pop()unshift()shift()sort()reverse()...
2022-01-19 23:14:06
4122
28
原创 10分钟，从0到1学会Vue内置指令与自定义指令（图文并茂版）
目录前言正文Vue指令的含义Vue指令的特点Vue内置指令v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-slotv-prev-cloakv-oncev-memov-isVue自定义指令全局自定义指令注册局部指令钩子函数钩子函数参数前言Vue指令无论是在面试中还是在工作中，都是高频知识点。因此，学会Vue指令非常有必要，本文
2022-01-17 11:47:48
1959
18
原创 React -- State Hook 详细介绍（函数组件也可以使用state了）
目录Hook 简介Hook 对 React 意味着什么？Hook 的使用动机是什么？1、在组件之间复用状态逻辑很难2、复杂组件变得难以理解3、难以理解的 classState Hook基本例子Hook 和 函数组件Hook 是什么？声明 StateuseState调用useState参数useState返回值读取 State更新 State示例分析步骤分析方括号的作用使用多个 state 变量总结Hook 简介...
2022-01-14 20:44:27
2188
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人