努力的小朱同学-CSDN博客

原创 Vue3学习记录（八）--- 组合式API和TypeScript

在基于Vite的项目中，开发服务器和打包器将只会对 TypeScript 文件执行语法转译，将其转换成JavaScript，而不会执行类型检查，因此在开发时推荐使用 VScode + Vue-Official 来获取即时的TS类型错误反馈。在单文件组件中，在使用了``之后，组件模板中的表达式也同样受到TS的类型支持，可以在模板表达式中使用TS的语法。

2024-03-21 22:27:33 998

原创 Vue3学习记录（七）--- 组合式API之指令和插件

v-memo该指令是Vue3的`v3.2`版本之后新增的指令，用于实现组件模板缓存，优化组件更新时的性能。除了Vue为我们提供的内置指令之外，还允许注册自定义指令，实现逻辑复用。一个自定义指令由一个包含指令钩子函数的对象来定义。插件（`Plugins`）是Vue中一种重要的扩展机制，允许开发者向 Vue 应用示例添加全局级别的功能。但插件本身并不具有添加全局功能的能力，而是需要借助`app.component()`等方法去实现功能。

2024-03-21 22:19:07 1006

原创 Vue3学习记录（六）--- 组合式API之依赖注入和异步组件

依赖注入包括provide（全局/局部）、inject、响应式变量的依赖注入、readonly()只读、依赖名称冲突等相关内容。异步组件包括：defineAsyncComponent()基本用法、ES模块动态导入、加载与错误状态处理等相关内容。

2024-03-08 11:20:34 1036

原创 Vue3学习记录（五）--- 组合式API之组件透传和组件插槽

组件透传包括属性透传、属性合并、属性冲突、事件透传、深层透传、禁用透传以及多根元素透传等相关内容。组件插槽包括基本用法、渲染作用域、默认内容、具名插槽、动态插槽名、作用域插槽等相关内容。

2024-03-08 11:15:14 1373

原创 Vue3学习记录（四）--- 组合式API之组件注册和组件数据交互

一个创建好的单文件组件（SFC）首先要进行注册，然后才能被别的组件使用。注册方法按照作用域区分为两种：全局注册和局部注册。全局注册需要通过`main.js`中利用Vue应用实例中提供的component()。局部注册需要在父组件中显式的导入要使用的组件。父组件想要向子组件传递数据，需要借助`Props`来实现。子组件向父组件传递数据需要借助自定义事件实现。父子组件之间可以通过`v-model`和`defineModel()`宏方法实现数据在父子组件之间的双向绑定。

2024-03-04 17:04:59 1127

原创 Vue3学习记录（三）--- 组合式API之生命周期和模板引用

生命周期，指的是一个 Vue 实例从创建到销毁的完整阶段。生命周期钩子函数，指的是 Vue 实例提供的内置函数，函数的参数为一个回调函数。这些钩子函数会在实例生命周期的某些固定时间点，依次按序执行其内部的回调函数。模板引用是Vue提供给我们用来操作DOM的一种方法，通过为DOM元素设置一个ref attribute属性，并设置属性值为一个响应式变量，从而获取对该DOM元素的引用。

2024-03-04 17:01:00 1201

原创 Vue3学习记录（二）--- 组合式API之计算属性和侦听器

计算属性computed()，用于根据依赖的响应式变量的变化，进行自动的计算，并返回计算后的结果。当依赖的响应式变量发生变化时，computed()会自动进行重新计算，并返回最新的计算结果。侦听器`watch()`用于实现监听一个响应式变量的变化，侦听器接收三个参数，其第一个参数表示所侦听的响应式变量，第二个参数表示响应式变量变化之后触发的回调函数，第三个参数是一个可选的选项，用来进行一些侦听器配置。在响应式变量发生变化时，触发回调函数，然后在回调函数中根据变量的状态变化，执行对应的操作。

2024-02-02 17:12:28 708

原创 Vue3学习记录（一）--- 组合式API之基础概念和变量声明

组合式 API (Composition API) 是Vue3和Vue2的v2.7之后版本中的全新特性，是一系列API的的集合（响应式API、生命周期钩子、依赖注入等等），其风格是基于函数的组合，以一种更直观、更灵活的方式来书写Vue单文件组件。变量声明可用：ref、reactive、shallowRef、shallowReactive。

2024-02-02 17:08:36 1057

原创 CSS 之图片九宫格变幻效果

本篇博客用于讲解如何实现图片九宫格变幻的样式效果，将图片分为九块填充在3×3的的九宫格子元素中，并结合`grid`、`hover`、`transition`等CSS属性，实现元素`hover`时，九宫格子元素合并为一张完整图片的动画效果。为了简化代码，demo中通过JS设置CSS变量的方法，优化了元素背景的设置过程，减少了代码的繁杂度。最后还结合js的点击事件实现了一个简易的点击拼图demo。

2024-01-27 21:11:36 1265

原创 Vue3新增特性之全局config.globalProperties和Teleport内置组件

1、在Vue3中，通过`createApp()`方法创造的应用实例会暴露一个 `config` 对象允许我们配置一些应用级的选项，例如全局变量。2、Teleport是 Vue 3 的新增的内置组件，用于将组件内的子节点传输/移动到整个页面 DOM 树的其他DOM节点下。其接收一个 to属性来指定传送的目标。to属性的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。

2024-01-27 21:06:05 1573

原创 CSS 之跑马灯边框

尝试实现一下跑马灯样式的边框，虽然这种样式并不常见（基本没卵用），其使用场景我至今没想到，但是它足够花里胡哨，玩的就是花活。经过一番实践，我实现了两种形态的跑马灯样式边框，其效果如下图所示。其主要使用的CSS属性有：`overflow`、`position`、`transform`、` animation`、`@keyframes`以及`::after`和`::before`等等。

2024-01-15 17:15:01 1469

原创 JavaScript 之位运算

JavaScript的位运算符是将进行运算的数字（八进制、十进制、十六进制等）转换为32位的二进制串，超过 32 位的数字会丢弃其最高有效位，只保留后32位二进制串。然后再对每一位进行运算。但运算后得出的结果，会再次转换成标准的十进制的数字，然后返回。如果进行位运算的数字是负数，则我们需要使用该负数的32位二进制补码来进行位运算。位运算符通常在处理大整数、位掩码、图形、加密等情况下使用，在日常编程工作中并不常用，对于一般的数字运算，使用常规的算术运算符即可。

2024-01-15 17:03:51 1072

原创 JavaScript 之 toString()方法详解

在 JavaScript 中，toString() 方法是很多数据类型内置的方法，它被用于将特定的数据类型转换为字符串。但是在不同的数据类型中的作用并非完全相同，下面就来详细讲解一下 toString() 方法在各种数据类型中的使用和作用。

2024-01-05 16:29:13 3511

原创 Vue 之修饰符汇总

在Vue中，修饰符是一种特殊的语法，用于修改指令或事件绑定的行为，它们以点号（`.`）的形式添加到指令或事件的后面，并可以改变其默认行为或添加额外的功能。Vue为我们提供了很多修饰符，相当于将一些常用DOM事件逻辑进行了封装，根据功能类别，共分为以下几类：① 事件修饰符。② 按键修饰符。③ 系统修饰符。④ 鼠标修饰符。 ⑤ 表单修饰符。⑥ 其他修饰符。

2024-01-05 16:25:20 1169 1

原创 Vue 工作开发小技巧

1、利用Sass的:global定义全局样式。2、在style内部使用v-bind给CSS属性绑定属性值。3、父子组件传值时，使用sync修饰符后，可直接在子组件中通过$emit('update:propName')来更新父组件中绑定的数据。4、利用v-bind同时向DOM元素绑定多个attribute属性。5、Vue指令结合动态参数，动态改变DOM元素的属性或改变监听的事件。

2023-12-14 11:47:21 1067

原创使用Echarts.js绘制环形图（指定触发高亮事件）

1、tab选中不限时，环形图表中正常渲染环形图，以及对应的数据类型图例和指示文字。2、环形图hover时，高亮hover所在的图形区域，图形区域放大，并悬浮弹窗展示相关数据。3、在切换tab时，选中指定tab，则环形图中的对应数据图形进行高亮显示，图形区域放大，指示文字和指示线加粗处理。其余数据图形区域透明度降低处理。4、指定图形标题和图形区域颜色。5、设置图形最小占有区域。

2023-12-07 10:48:25 878

原创使用Echarts.js绘制多条折线图

1、tab选中不限时，图表中同时渲染多条折线，对应多种类型的数据。2、切换tab时，如果选中指定tab，则图表中只渲染当前tab对应的折线，且指定不同tab对应不同的折线颜色。3、折线图hover时，会以提示框的形式展示X轴信息以及对应所有折线的信息。4、Y轴坐标会根据数据列表自动计算坐标轴的最小值和最大值。5、X轴坐标会根据数据列表决定坐标轴信息。6、指定图表标题和标题位置。注意：当前案例是在Vue2中使用，echarts.js版本为5.3.2。

2023-11-22 14:13:10 1048 2

原创使用Echarts.js绘制中国地图

1、展示中国所有省份，包括南海诸岛，确保领土完整，中国领土神圣且不可侵犯。2、每个省份根据对应数据的不同渲染不同的颜色，根据数据从小到大，对应底部视觉映射组件指定的颜色渐变区间内从浅到深。3、每个省份不可被选中，但鼠标hover会展示对应数据信息，且对应数据图形具有hover高亮样式。4、颜色渐变区间对应的数据区间，由数据列表的实际数据决定，最小值为0，最大值为数据列表的最大值。注意：当前案例是在Vue2中使用，echarts.js版本为5.3.2。

2023-11-22 11:01:20 1057

原创前端实现图片下载的方法

在任何方案下，前端都无法绕过跨域的限制，所以需要图片所在的服务器对你当前域名开放权限，否则是无法下载的，最多能做到查看图片。1、直接使用a标签的download属性。2、canvas对象+a标签。3、ajax请求(blob或base64格式)+a标签。4、domtoimage+a标签。5、form表单。6、iframe。

2023-11-07 19:55:37 508

原创 CSS 之 display属性详解

display的属性值有：block、inline、flex、grid、table、flow、flow-root、ruby、list-item、table-row、table-cell、table-column、table-caption、table-row-group、table-header-group、table-footer-group、table-column-group、ruby-base、ruby-text、ruby-base-container、ruby-text-container等等。

2023-10-18 15:49:39 12475

原创 CSS 之 table 表格布局

除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。

2023-10-09 09:49:31 5624

原创 CSS 之 grid 网格布局

设置display: grid;的元素，即为容器元素，容器属性共有17条，包含以下：grid-template-columns、grid-template-rows、column-gap、row-gap、gap等等容器的直接子元素即为项目元素，项目属性共有10条，包含以下：grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area、justify-self、align-self等等

2023-09-16 14:46:29 833

原创 JavaScript 之 Symbol 数据类型

symbol类型具有以下特点：① 唯一性：每个symbol值都是唯一的；② 不可变性：symbol值是不可被修改的；③ 属性标识符：symbol类型的值可以作为对象属性的标识符key；④Symbol可以与其他数据类型进行运算，但不能被强制转换为其他数据类型。利用前两个特性，可以避免属性名的冲突和保证属性不会被意外覆盖。

2023-09-07 19:32:19 1208

原创前端PWA应用的相关知识和基础Demo

PWA 主要拥有以下几种特点：① 跨平台② 可安装③ 离线访问④ 推送通知⑤ 快速加载⑥ 可搜索⑦ 热更新。PWA的实现依赖于多种技术实现，其中最核心的技术为`Service Worker`、`Web App Manifest`和`Push Notification`。

2023-08-19 22:36:56 2501

原创 Vue 之 mixins 和 provide/inject

`mixins` 又称混入，是指将一些可复用的代码（JS、生命周期钩子函数等等）抽离出来，定义成`mixins`模块，然后混入到多个组件中，从而实现组件间的代码共享，减少重复代码。`provide/inject ` 是Vue在2.2.0版本新增的特性，该特性可以实现祖先组件向其后代组件跨层级传递数据，无论两者中间相隔多少组件层级，相对于传统的`props`传递方式，减少了传递数据的繁琐操作，提升了代码的可读性和可维护性。

2023-07-04 20:41:33 1325

原创前端终止请求的三种方式（ajax、axios）

XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest`对象的请求，该方法没有参数，也没有返回值。在axiso的0.22.0版本开始，需要使用浏览器原生的AbortController来终止请求，是目前推荐用的方法。在axiso的0.22.0之前的版本，需要使用取消令牌cancel token来终止请求，不过该API从0.22.0开始被弃用，目前已不建议再使用。

2023-06-14 17:13:52 9008

原创 JS 之事件Event对象详解（属性、方法、自定义事件）

事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。

2023-06-10 17:28:29 7501 3

原创前端之 FormData对象进阶

本篇博客主要包含以下内容：1、FormData对象、JSON字符串、key=value字符串三种参数形式对比。2、对FormData对象中的数据进行过滤。3、FormData对象结合同步token预防CSRF攻击。4、FormData对象结合input实现选择文件夹，批量上传文件。5、FormData对象结合dataTransfer实现拖拽文件夹，批量上传文件。

2023-05-19 18:14:35 2340 1

原创前端之 FormData对象浅谈

FormData提供了一种以 `key/value`键值对集合表示表单数据的数据构造方式，通过该方式我们可以将`file`、`blob`等不易传输的数据通过 `ajax` 请求轻松的发送到服务器端。当使用`FormData` 对象作为参数时，无需手动设置请求的编码类型，浏览器会自动将请求的编码类型`Content-type`设置为`multipart/form-data`。

2023-05-14 20:34:41 4637

原创 Vue Cli 之环境变量和模式

我们在使用 Vue-cli 创建的Vue项目中，可以在构建和运行时为项目设置环境变量，这些环境变量会根据环境（模式）的不同，而自动注入到项目中，也就是说我们可以根据环境不同，设置不同的环境变量或者给同个环境变量赋予不同的值，从而实现不同的效果。

2023-05-10 10:25:02 1988

原创 JavaScript实现点击复制（JS访问剪贴板相关）

document.execCommand()方法用来操作当前聚焦的可编辑元素（`input`、`textarea`）中的内容，例如复制、剪贴、粘贴、删除、文本加粗、插入图片等等效果。Clipboard API 提供了响应剪贴板命令和异步读写系统剪贴板的能力，该API是用来取代document.execCommand() 这种剪贴板访问方式的。

2023-04-06 19:55:57 8759 3

原创 script标签的defer和async属性详解

对于普通脚本，如果设置该属性，那么该脚本将会并行加载，不阻碍HTML文档的解析，当加载完成后，如果此时文档还没解析完成，则会终止解析，先执行该脚本，执行结束后再继续解析；，浏览器会在文档解析的同时并行的加载这些脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。事件的执行，去执行已经加载好的脚本信息，如果此时脚本还未加载完成，则会等待脚本加载完成后，再执行该脚本。，则该脚本不会阻碍文档的解析，只会在文档解析的同时去加载脚本信息，当文档解析完成后，暂时阻止。

2023-03-24 15:54:18 3470

原创 CSS 之 background 系列属性详解

背景系列属性，共包含9种属性：background-color：设置元素的背景颜色。background-image：设置元素的背景图片。background-size：设置元素背景图片的大小。background-position：设置元素背景图片的位置。background-repeat：设置背景图片是否重复，以及如何重复。background-clip：设置元素背景的渲染区域。background-origin：设置元素背景的定位区域。background-attachment：设置元素的背景图片是否

2023-03-09 20:13:35 28188 4

原创前端Cookie基础知识

Cookie（也称为Web Cookie、浏览器Cookie等等）是服务器发送到用户浏览器并保存在本地的一小块数据，该数据通常是用户账号相关的信息，不同浏览器对Cookie的数量和大小限制不同，但一般来说，单域名下设置的cookie不能超过30个，单条cookie的大小不能超过4kb。如果Cookie超出浏览器限制，则会被浏览器忽略，不被保存。而且Cookie可以设置过期时间，到达过期时间后，浏览器就会把Cookie清除掉。

2023-02-28 17:52:35 9327

原创前端将base64图片转换成file文件

首先利用split()方法对base64进行分割，将前缀文件信息，与文件内容分隔开。然后从前缀中获取到文件的类型信息以及具体的格式后缀。再然后借助window.atob()方法对base64文件数据进行解码，接着利用Uint8Array(length)和charCodeAt(index)，对接码后的数据进行处理。最后通过File(bits, name, options)构造函数，传入对应的参数创建一个新的file对象。

2023-02-21 15:21:08 9941 2

原创前端借助Canvas实现压缩base64图片两种方法

第一种方法是在创建canvas元素后，设置其宽高为图片宽高*压缩比例，然后将图片渲染到canvas元素上，同时设置渲染图片的宽高与canvas一致，最后通过toDataURL()将canvas画布转成base64，参数type设置为原来的图片类型。第二种方法是在创建canvas元素后，设置其宽高与图片宽高一致，并将图片渲染到canvas元素上，但是在通过toDataURL()将canvas画布转成base64时，第一个参数设置图片类型为image/jpeg或image/webp，第二个参数设置图片的质量

2023-02-19 19:17:55 3271 2

原创前端FileReader对象实现图片file文件转base64

其原理主要是借助`FileReader`对象来实现图片格式的转换，`FileReader`对象中的`readAsDataURL()`方法，可以读取一个`File`或`Blob`类型的文件，并将其转换为base64格式的字符串。但要注意的一点是：我们通过`readAsDataURL()`方法去读取一个文件时，属于异步操作，因此我们需要在`FileReader`对象的onload事件或onerror事件中，通过回调函数的方式，将文件类型转换的结果，传递给方法的调用者。还有最重要的一点：该方法不兼容IE。

2023-02-19 16:36:22 3600

Web APIs 之 Selection对象和Range对象的基本使用

空空如也