努力的小朱同学-CSDN博客

动态组件允许在同一挂载节点动态切换多个组件，可以根据具体条件，动态决定显示的组件。动态组件默认只保持当前组件存活，其余被切换掉的组件会被卸载，但可以结合KeepAlive组件实现被切换掉的组件保持存活状态。将KeepAlive组件包裹在动态组件的外层，当动态组件发生切换时，默认会将所有被切走的非活跃组件进行缓存，而不是销毁，并且组件内部的状态也会被保留。

2024-05-28 16:22:58 2779

原创 CSS 之圆形波浪进度条效果

本篇博客讲述了如何实现一个圆形波浪进度条的样式效果，该样式的加载进度条可以用在页面跳转或数据处理等情况下的加载动画，比起普通的横条进度条来说，样式效果更生动美观。主要用到：overflow、border-radius、position、帧动画以及自定义属性等相关CSS属性。

2024-05-13 14:39:47 1002 2

原创 CSS 之帧动画（Keyframe Animation）

帧动画允许你通过指定 CSS 属性在不同时间点上的行为来创建动画效果，这些时间点被称为关键帧，所以又被称为关键帧动画。帧动画需要通过@keyframes来创建。@keyframes`仅仅是定义了在所在作用域内全局都可以使用的关键帧动画，定义好了动画的过程，但是其并不能自动应用。还需要通过CSS的animation属性来显式的指定关键帧动画应用的元素，以及一系列相关的动画属性。

2024-05-13 14:34:46 3749

transition属性用来设置元素的过渡动画，是过渡属性的简写形式，属性值可以包含四部分transition-property、transition-duration、ransition-timing-function和transition-delay，分别表示过渡动画的CSS属性、过渡动画所需的时间、过渡动画执行的速度曲线和过渡动画执行前需要等待的时间。过渡相关事件：transitionrun、transitionstart、transitionend、transitioncancel。

2024-04-25 16:16:15 7153

原创前端实现文件下载的方法

该方案是通过`ajax`请求，获取到`blob`类型的文件数据流，然后再将文件数据流转换成`URL`对象，最终再通过``标签实现下载。下载时可以自定义指定文件下载到本地时的名称。

2024-04-25 16:08:39 628

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

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

2024-03-21 22:27:33 1119

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

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

2024-03-21 22:19:07 1307

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

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

2024-03-08 11:20:34 1452

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

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

2024-03-08 11:15:14 2661 1

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

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

2024-03-04 17:04:59 1699

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

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

2024-03-04 17:01:00 2123

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

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

2024-02-02 17:12:28 981

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

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

2024-02-02 17:08:36 1498

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

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

2024-01-27 21:11:36 1740

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

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

2024-01-27 21:06:05 3903

原创 CSS 之跑马灯边框

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

2024-01-15 17:15:01 2508 1

原创 JavaScript 之位运算

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

2024-01-15 17:03:51 2035

原创 JavaScript 之 toString()方法详解

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

2024-01-05 16:29:13 13971 2

原创 Vue 之修饰符汇总

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

2024-01-05 16:25:20 1345 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 1155

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

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

2023-12-07 10:48:25 1440

原创使用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 2240 2

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

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

2023-11-22 11:01:20 2708

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

空空如也