努力的小朱同学-优快云博客

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

2024-05-28 16:22:58 2988

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

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

2024-05-13 14:39:47 1206 6

原创 CSS 之帧动画（Keyframe Animation）

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

2024-05-13 14:34:46 4443

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

2024-04-25 16:16:15 8988

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

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

2024-04-25 16:08:39 663

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

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

2024-03-21 22:27:33 1145

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

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

2024-03-21 22:19:07 1429

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

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

2024-03-08 11:20:34 1513

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

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

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

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

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

2024-03-04 17:04:59 1786

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

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

2024-03-04 17:01:00 2228

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

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

2024-02-02 17:12:28 1037

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

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

2024-02-02 17:08:36 1582

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

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

2024-01-27 21:11:36 1829

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

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

2024-01-27 21:06:05 4236

原创 CSS 之跑马灯边框

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

2024-01-15 17:15:01 2720 2

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

使用场景：针对用户选中页面内容后，获取用户，选中部分的内容，并对选中部分进行处理的场景。或者想要设置页面某部分内容默认呈现选中状态的场景。 `Selection`对象存储了用户在网页上选择的文本范围或者光标符号的位置等信息，代表网页中的文本选区，可能横跨多个元素，包含文本、图片等等。文本选区是由用户点击鼠标左键并拖拽鼠标选中页面内容产生的，也就是指页面上变成蓝底的那一部分内容。 `Range`对象表示一个包含节点与文本的文档片段，通常与`Selection`对象结合使用，`Selection`对象选中的文本选区所对应的文档片段，就是一个`Range`对象。

2023-02-21

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人