当前位置：首页 > news >正文

Vue 3.0 Transition 组件使用详解

news 来源：原创 2025/7/14 1:33:07

Vue 3.0 的 Transition 组件提供了一种简单的方式来为元素或组件的进入/离开添加动画效果。下面是使用<script setup>语法糖的实现方式。

1. 基本用法

使用场景：当需要为元素的显示/隐藏添加简单的淡入淡出效果时，这是最基础的过渡实现方式。

<template><!-- 按钮用于触发显示/隐藏状态切换 --><button @click="show = !show">Toggle</button><!-- Transition包裹需要动画的元素 --><Transition><p v-if="show">Hello Vue 3 Transition!</p></Transition>
</template><script setup>
import { ref } from 'vue'const show = ref(true)
</script><style>
/* * 定义过渡效果：* - v-enter-active/v-leave-active 定义过渡持续时间和缓动函数* - v-enter-from/v-leave-to 定义起始和结束状态*/
.v-enter-active,
.v-leave-active {transition: opacity 0.5s ease;
}.v-enter-from,
.v-leave-to {opacity: 0;
}
</style>

实现原理：当元素插入或删除时，Vue会自动在适当的时机添加/移除对应的CSS类名，从而触发CSS过渡效果。这种实现方式性能较好，适合大多数简单场景。

2. 自定义类名前缀

使用场景：当项目中存在多个不同的过渡效果时，为了避免类名冲突，或者需要更语义化的类名时使用。

<template><button @click="show = !show">Toggle</button><!-- 使用name属性定义前缀 --><Transition name="fade"><p v-if="show">Hello with custom name</p></Transition>
</template><script setup>
import { ref } from 'vue'const show = ref(true)
</script><style>
/* 类名前缀变为fade- */
.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s ease;
}.fade-enter-from,
.fade-leave-to {opacity: 0;
}
</style>

最佳实践：建议为每个独立的过渡效果都定义特定的前缀，这样既避免了样式冲突，也提高了代码可读性。特别是当项目中使用多种动画库时，这种隔离尤为重要。

3. JavaScript 钩子

使用场景：当需要实现复杂的动画逻辑，或者需要与第三方JavaScript动画库(如GSAP)集成时使用。

<template><button @click="show = !show">Toggle</button><!-- 绑定各个动画阶段的钩子函数 --><Transition@before-enter="onBeforeEnter"@enter="onEnter"@after-enter="onAfterEnter"@enter-cancelled="onEnterCancelled"@before-leave="onBeforeLeave"@leave="onLeave"@after-leave="onAfterLeave"@leave-cancelled="onLeaveCancelled"><div v-if="show" class="box">Content</div></Transition>
</template><script setup>
import { ref } from 'vue'const show = ref(true)// 进入动画开始前的准备工作
const onBeforeEnter = (el) => {el.style.opacity = 0el.style.transform = 'scale(0.5)'
}// 执行进入动画
const onEnter = (el, done) => {// 使用requestAnimationFrame确保动画流畅requestAnimationFrame(() => {el.style.transition = 'all 0.5s ease'el.style.opacity = 1el.style.transform = 'scale(1)'// 监听过渡结束事件el.addEventListener('transitionend', done, { once: true })})
}// 其他钩子函数...
</script><style>
.box {width: 100px;height: 100px;background-color: #42b983;border-radius: 4px;
}
</style>

注意事项：使用JavaScript钩子时，必须确保在适当的时机调用done回调函数，否则过渡将无法正常完成。这种方式虽然灵活，但性能不如纯CSS实现，应谨慎使用。

4. 过渡模式

使用场景：当两个元素需要交替显示时（如标签切换、轮播图等），避免新旧元素同时存在导致的布局问题。

<template><button @click="toggleView">Toggle View</button><!-- 使用out-in模式确保当前元素先离开，新元素再进入 --><Transition mode="out-in"><component :is="currentView" :key="currentView.name"></component></Transition>
</template><script setup>
import { ref, shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'const currentView = shallowRef(CompA)const toggleView = () => {currentView.value = currentView.value === CompA ? CompB : CompA
}
</script><style>
.v-enter-active,
.v-leave-active {transition: opacity 0.3s ease, transform 0.3s ease;
}.v-enter-from {opacity: 0;transform: translateX(30px);
}.v-leave-to {opacity: 0;transform: translateX(-30px);
}
</style>

模式选择：

in-out：新元素先进入，完成后当前元素离开，使用较少；

out-in：当前元素先离开，完成后新元素进入，更符合用户预期，使用较多；

5. 列表过渡

使用场景：当需要对v-for渲染的列表元素添加排序、添加、删除动画时使用。

<template><div class="demo"><button @click="addItem">Add Item</button><button @click="removeItem">Remove Item</button><button @click="shuffleItems">Shuffle</button><!-- TransitionGroup管理列表过渡 --><TransitionGroup name="list" tag="ul"><li v-for="item in items" :key="item.id" class="item">{{ item.text }}</li></TransitionGroup></div>
</template><script setup>
import { ref } from 'vue'
import { shuffle } from 'lodash-es'let id = 3
const items = ref([{ id: 0, text: 'Item 0' },{ id: 1, text: 'Item 1' },{ id: 2, text: 'Item 2' }
])const addItem = () => {items.value.push({ id: id++, text: `Item ${id}` })
}const removeItem = () => {if (items.value.length > 0) {const randomIndex = Math.floor(Math.random() * items.value.length)items.value.splice(randomIndex, 1)}
}const shuffleItems = () => {items.value = shuffle(items.value)
}
</script><style>
/* 进入/离开动画 */
.list-enter-active,
.list-leave-active {transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {opacity: 0;transform: translateY(30px);
}/* 确保离开的元素脱离文档流 */
.list-leave-active {position: absolute;
}/* 排序动画 */
.list-move {transition: transform 0.5s ease;
}/* 基础样式 */
.demo {max-width: 300px;margin: 20px auto;
}
.item {padding: 8px 16px;margin: 4px 0;background-color: #f3f3f3;border-radius: 4px;
}
ul {position: relative;padding: 0;list-style: none;
}
</style>

关键点：

1. 必须为每个元素设置唯一的key；

2. 使用list-move类处理排序动画；

3. 离开动画需要设置position: absolute避免布局问题；

4. 容器需要设置position: relative；

6. 与 CSS 动画库集成

使用场景：当需要快速实现复杂动画效果，或项目中使用专业动画库时。

<template><button @click="show = !show">Toggle</button><!-- 直接使用动画库的类名 --><Transitionenter-active-class="animate__animated animate__bounceIn"leave-active-class="animate__animated animate__hinge"><p v-if="show" class="demo-text">Using Animate.css</p></Transition>
</template><script setup>
import { ref } from 'vue'
import 'animate.css'const show = ref(true)
</script><style>
.demo-text {font-size: 24px;margin: 20px 0;color: #42b983;
}
</style>

优势：

1. 无需手动编写复杂动画；

2. 可以轻松实现专业级动画效果；

3. 跨浏览器兼容性好；

推荐库：

1. Animate.css：提供大量预设动画；

2. Motion One：轻量级高性能动画库；

3. GSAP：专业级动画解决方案；

7. 性能优化建议

1. 优先使用CSS过渡：浏览器对CSS动画的优化更好，性能更高；

2. 使用transform和opacity：这些属性不会触发重排，动画更流畅；

3. 避免使用height/margin等属性：这些属性会导致布局重计算；

4. 合理使用will-change：提前告知浏览器哪些属性会变化；

5. 减少同时运行的动画数量：过多动画会消耗大量资源；

6. 使用硬件加速：对移动设备特别重要；

.animated-element {transform: translateZ(0);
}

通过合理使用这些技术，可以在保证用户体验的同时，确保应用的性能表现。

Vue 3.0 Transition 组件使用详解

Vue 3.0 的 Transition 组件提供了一种简单的方式来为元素或组件的进入/离开添加动画效果。下面是使用<script setup>语法糖的实现方式。 1. 基本用法使用场景：当需要为元素的显示/隐藏添加简单的淡入淡出效果时，这是最基础的过渡实现方式。 &…...

编程日记 2025/7/14 1:33:07

深入浅出IIC协议 - 从总线原理到FPGA实战开发 -- 第三篇：Verilog实现I2C Master核

第三篇：Verilog实现I2C Master核副标题 ：从零构建工业级I2C控制器——代码逐行解析与仿真实战 1. 架构设计 1.1 模块分层设计三层架构 ： 层级功能描述关键信号PHY层物理信号驱动与采样sda_oe, scl_oe控制层协议状态机与数据流控制state…...

编程日记 2025/6/28 21:58:00

通义灵码助力JavaScript开发：快速获取API与智能编码技巧

一、引言 JavaScript 拥有丰富的 API 生态，从浏览器的 Web API 到 Node.js 的环境生态，为开发者提供了强大的工具和库。然而，面对如此庞大的生态系统，开发者常常需要花费大量时间翻阅文档来查找和学习如何使用这些 API。通义灵码…...

编程日记 2025/7/14 1:20:26

ubuntu kubeasz 部署高可用k8s 集群

ubuntu kubeasz 部署高可用k8s 集群测试环境主机列表软件清单kubeasz 部署高可用 kubernetes配置源配置host文件安装 ansible 并进行 ssh 免密登录：下载 kubeasz 项⽬及组件部署集群部署各组件开始安装修改 config 配置文件增加 master 节点增加 kube_node 节点登录dashboard…...

编程日记 2025/7/14 0:29:43

如何看待镍钯金PCB在当代工业制造中的地位和应用？

随着电子科技的飞速发展，电路板作为电子设备的核心组成部分，其制造材料和工艺也在不断进步。镍钯金（NiPdAu）电路板因其独特的物理和化学性质，在众多领域得到了广泛应用。本文将探讨镍钯金电路板的主要应用领域&#xf…...

编程日记 2025/7/13 23:30:55

端到端学习：使用一个模型直接接受包含缺失值的数据。 brits_classification.py 完整代码如下： # brits_classification.pyfrom benchpots.datasets import preprocess_physionet2012 from pypots.classification import BRITS from pypots.nn.function…...

编程日记 2025/7/14 1:31:21

(05）数字化转型之生产制造：从通常的离散制造到柔性化生产的全景指南

当今制造业正经历着前所未有的数字化变革，从传统的离散制造到流程制造，再到新兴的项目制造和柔性制造，各种生产模式都在加速向智能化方向演进。本文将系统性地介绍制造业生产管理的完整体系，为企业数字化转型提供全面的方法论和实…...

编程日记 2025/7/13 23:37:18

JMeter 教程：JSON 断言的简单介绍

目录 JMeter 教程：JSON 断言的简单介绍【快速上手】 ✅ 什么是 JSON 断言？ 🛠️ 使用前提 📄 JSON 断言添加步骤步骤一：添加 JSON Assertion 📌 示例说明 ✅ 常用 JSONPath 写法速查 ✅ 断言结果查…...

编程日记 2025/7/14 1:16:35

RedissonClient主要功能概述

以下是 RedissonClient 提供的主要功能和特性的详细用法说明，结合代码示例和实际应用场景： 1. 分布式集合与映射 Redisson 提供了多种线程安全的分布式集合和映射，适用于分布式环境下的数据存储和操作。 RMap（分布式 Map&#x…...

编程日记 2025/7/14 0:44:12

USB学习【13】STM32+USB接收数据过程详解

目录 1.官方的描述2.HAL的流程把接收到的数据从PMA拷贝到用户自己定义的空间中 3.处理接收到的数据4.最后再次开启准备接收工作 1.官方的描述 2.HAL的流程以上的官方说法我们暂时按下不表。如果接收到数据，会激活中断进入到USB_LP_CAN1_RX0_IRQHandler&#xff0…...

编程日记 2025/6/28 21:59:20

更新2011-2025经济类联考 396-真题+解析 PDF

目录树： ├── 2011-2025经综-真题 │ ├── 2011年396经济联考综合能力真题 .pdf │ ├── 2012年396经济联考综合能力真题 .pdf │ ├── 2013年396经济联考综合能力真题 .pdf │ ├── 2014年396经济联考综合能力真题 .pdf │ ├── 2015年396经…...

编程日记 2025/7/14 1:02:35

string在c语言中代表什么（非常详细）

在 C 语言中，string 更多让人联想到的是 <string.h> 这个标准库。 <string.h> 库为我们提供了一系列用于操作字符串的函数接口，就像是一个功能强大的工具箱，让程序员能够方便地对字符串进行各种操作。例如，当我们想…...

编程日记 2025/7/14 0:48:31

JIT即时编译器全面剖析：原理、实现与优化

引言在现代软件开发领域，性能优化一直是开发者关注的核心问题之一。随着计算能力的提升和应用场景的多元化，如何提高程序运行效率成为技术发展的关键驱动力。即时编译器（Just-In-Time Compiler，简称JIT）作为一项革命性…...

编程日记 2025/6/29 1:05:39

电网中窃电分析：概念、算法与应用

一、引言在现代电力系统中，窃电行为是一个严重影响电网经济运行和供电秩序的问题。窃电不仅导致供电企业的经济损失，破坏了电力市场的公平性，还可能对电网的安全稳定运行构成威胁，甚至引发安全事故。随着科技的不断进步&#xff…...

编程日记 2025/6/29 1:00:24

从零开始的嵌入式学习day24

标准IO 头文件需求： #include <stdio.h>1.fopen和fclose (1)fopen fopen的函数功能是打开一个文件。首先看看fopen的函数声明： FILE *fopen(const char *path, const char *mode);第一个参数path是文件地址，传入的是不可变的字符…...

编程日记 2025/7/14 0:13:49

高级SQL技巧：窗口函数与复杂查询优化实战

高级SQL技巧：窗口函数与复杂查询优化实战开篇：数据库开发中的挑战在现代企业级应用中，数据库不仅是存储数据的核心组件，更是处理复杂业务逻辑的重要工具。然而，随着数据量和并发请求的不断增长，传统的S…...

编程日记 2025/7/14 1:10:42

C++修炼：map和set的使用

Hello大家好！很高兴我们又见面啦！给生活添点passion，开始今天的编程之路！ 我的博客：<但凡. 我的专栏：《编程之路》、《数据结构与算法之美》、《题海拾贝》、《C修炼之路》欢迎点赞，关注&am…...

编程日记 2025/7/13 23:30:57

ABC 355

D. Intersecting Intervals 首先思考两个区间相交会有哪些情况：有两种左右端点包含，一种大区间包含小区间。但是反过来思考，两个区间不相交只会有两种情况：Ri < Lj 和 Rj < Li。非常典型的逆向思考对左右端点升序排序后&a…...

编程日记 2025/7/5 4:04:13

正则表达式进阶（三）：递归模式与条件匹配的艺术

在正则表达式的高级应用中，递归模式和条件匹配是处理复杂嵌套结构和动态模式的利器。它们突破了传统正则表达式的线性匹配局限，能够应对嵌套括号、HTML标签、上下文依赖等复杂场景。本文将详细介绍递归模式（(?>...)、 (?R) 等&#xff0…...

编程日记 2025/6/28 23:07:18

芯片分享之AD5542性能介绍

产品特征： AD5541/AD5542均为单通道、16位、串行输入、电压输出数模转换器(DAC)，采用2.7 V至5.5 V单电源供电。DAC输出范围为0 V至VREF DAC输出范围为0 V至VREF，保证单调性，提供1 LSB INL精度（16位）&…...

编程日记 2025/6/29 0:06:39

从零开始：Python 从0到1轻松入门

你是否曾好奇，那些能自动处理数据、搭建网站、甚至预测未来趋势的神奇程序是如何诞生的？答案或许就藏在 Python 这门简洁而强大的编程语言中！Python以其“代码即可读性”的设计哲学，成为全球开发者的心头好——无论是初学者入门&a…...

编程日记 2025/6/29 0:28:53

Linux线程互斥与同步(上)(29)

文章目录前言一、资源共享问题多线程并发访问临界区与临界资源“锁”概念引入二、多线程抢票并发抢票引发问题三、线程互斥互斥锁相关操作解决抢票问题互斥锁的原理多线程封装互斥锁的封装总结前言马上要结束了！！！ 我们在学习多线…...

编程日记 2025/6/28 21:58:03

深入解析 hping3网络探测与测试利器

一、什么是 hping3？ 体量轻巧：安装包仅约 255 KB。协议多样：支持 TCP、UDP、ICMP、RAW IP 四种模式。灵活定制：可设置任意报文头、分片、Payload 长度；还支持伪造源地址、随机目标等高级操作。脚本化：集成…...

编程日记 2025/7/3 6:24:37

SPA模式下的es6如何加快宿主页的显示速度

SPA的模式下，宿主页是首先加载的页面，会需要一些主要的组件，如element-plus，easyui，devextreme，ant-design等，这些组件及其依赖组件，文件多，代码量大，可能导致…...

编程日记 2025/6/28 21:58:08

环境配置！

1.下载openEuler虚拟机和rocky虚拟机下载好后，ping一下看一下手动配置的网络ok不，再把复杂密码改成自己能记住的简单密码 2.安装软件下载yum源也可以用阿里云的yum源把里面的：%d全删了，然后把 #generic-repos is licensed …...

编程日记 2025/6/28 21:58:05

【VS Code】Qt程序的调试与性能分析

要对 Qt 程序进行性能分析和调试，尤其是使用像 Valgrind、Perf 或 GDB 这类工具时，通常需要结合开发环境（如 VS Code）与相关插件或命令行工具。以下是一些常用的方法和步骤： 1. VS Code 调试 Qt 程序所需配置&…...

编程日记 2025/6/29 1:04:58

记录学习的第三十六天

很久没写过博客了，今天又开始了。今天很不错，了解了查分数组的实质。还是做了一道滑动窗口的题，我什么时候才能刷完滑动窗口啊。...

编程日记 2025/6/28 22:09:38

ANSI V 级对夹球阀控制阀：高性价比零泄漏流体控制新选择-耀圣

ANSI V 级对夹球阀控制阀：高性价比零泄漏流体控制新选择在化工、食品、给排水等工业领域，流体控制的精准性与密封性直接关乎生产安全与效率。ANSI V 级对夹球阀控制阀凭借零泄漏密封性能（ANSI VI 级标准）、紧凑的对夹式结构、亲…...

编程日记 2025/6/28 22:15:18

pcdn核心要素

开展PCDN业务最核心的是明确业务定位、保障网络与硬件基础、确保合规运营，并选择合适的盈利模式。以下是具体要点： 1. 明确业务定位与目标内容类型适配：PCDN适合高并发、大流量的内容分发场景，如视频直播、点播、大文件下载等。…...

编程日记 2025/6/28 21:58:36

数据分析_主播考核指标体系搭建

作为一名合格的数据分析师，要同时具备逻辑框架搭建能力以及解决实际问题的经验。通过指标量化问题、监控业务健康度并驱动决策。以下是我搭建抖音电商主播考核指标体系时的一些经验，希望对大家有些帮助。搭建主播能力考核指标体系需要结合直播业务的核心…...

编程日记 2025/6/28 23:32:20

联合索引失效情况分析

一.模拟表结构： 背景： MySQL版本——8.0.37 表结构DDL： CREATE TABLE unite_index_table (id bigint NOT NULL AUTO_INCREMENT COMMENT 主键,clomn_first varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMEN…...

编程日记 2025/6/29 1:29:55

ZYNQ Cache一致性问题解析与实战：从原理到创新优化

一、Cache一致性：多核系统的"记忆迷宫" 1.1 为什么需要关注Cache一致性？在Zynq-7000系列SoC的双核ARM Cortex-A9架构中，每个CPU核心拥有32KB L1数据Cache和512KB共享L2 Cache。当两个核心同时操作共享内存时，可能会出现： #mermaid-svg-RD2USaYdR7mMPPIA {fon…...

编程日记 2025/6/29 0:55:20

vtkPiecewiseFunction

1. 定义分段函数映射。 2.允许添加控制点，并允许用户控制控制点之间的功能。 3.基于锐度和中点参数，在控制点之间使用分段hermite曲线。 4.锐度为0产生分段线性函数，锐度为1产生分段常数函数。 5.中点是曲线达到Y中值的控制点之间的归一化距离…...

编程日记 2025/7/2 18:07:58

HarmonyOS NEXT～鸿蒙系统与mPaaS三方框架集成指南

HarmonyOS NEXT～鸿蒙系统与mPaaS三方框架集成指南 1. 概述 1.1 鸿蒙系统简介鸿蒙系统(HarmonyOS)是华为开发的分布式操作系统，具备以下核心特性： 分布式架构：支持跨设备无缝协同微内核设计：提高安全性和性能一次开…...

编程日记 2025/7/4 13:57:04

【老马】流程引擎（Process Engine）概览

前言大家好，我是老马。最近想设计一款审批系统，于是了解一下关于流程引擎的知识。下面是一些的流程引擎相关资料。工作流引擎系列工作流引擎-00-流程引擎概览工作流引擎-01-Activiti 是领先的轻量级、以 Java 为中心的开源 BPMN 引擎&#x…...

编程日记 2025/6/28 21:58:07

基于ROS2/Gazebo的室内送餐机器人系统开发实战教程

1. 系统架构设计 1.1 功能需求分析 #mermaid-svg-Yht1n03rcf5MP4du {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Yht1n03rcf5MP4du .error-icon{fill:#552222;}#mermaid-svg-Yht1n03rcf5MP4du .error-text{fill:…...

编程日记 2025/6/28 23:47:17

msq基础

一、检索数据 SELECT语句 1.检索单个列 SELECT prod_name FROM products 上述语句用SELECT语句从products表中检索一个名prod_name的列，所需列名在SELECT关键字之后给出，FROM关键字指出从其中检索数据的表名 （返回数据的顺序可能是数据…...

编程日记 2025/6/29 0:55:31

威纶通触摸屏IP地址设定步骤及程序下载指南

在使用威纶通触摸屏时，正确设定IP地址以及完成程序下载是确保其正常运行和实现功能的关键步骤。本文将详细介绍威纶通触摸屏IP地址设定步骤及程序下载的方法。一、IP地址设定步骤 （一）前期准备确保威纶通触摸屏已经通电并启动&#xff0…...

编程日记 2025/6/29 1:20:53

全排列问题深度解析：为何无需index参数且循环从i=0开始？

文章目录问题背景一、为何回溯函数不需要 index 参数？1. 全排列问题的核心特性2. index 的作用与局限性3. 正确设计：用 used[] 替代 index 二、为何循环从 i0 开始而非 index？1. 排列问题的顺序敏感性2. 对比组合问题的循环设计3. 关键区别总…...

编程日记 2025/6/28 23:46:20

计算机网络通信技术与协议（七）———关于ACL的详细解释

今日学习状态： 关于ACL，我们在之前的博文中有简要的提及到，今天我们将ACL作为一个专题进行讲解： 目录 ACL成立背景： ACL（Access Control List，访问控制列表）： 五元组…...

编程日记 2025/6/29 8:24:43

《算法笔记》11.8小节——动态规划专题-＞总结问题 D: Coincidence

题目描述 Find a longest common subsequence of two strings. 输入 First and second line of each input case contain two strings of lowercase character a…z. There are no spaces before, inside or after the strings. Lengths of strings do not exceed 100. 输出…...

编程日记 2025/6/28 21:58:46

power BI 倒计时+插件HTML Content，实现更新倒计时看板！

直接拿去玩吧，花了我两个小时。搜了b站和百度都没找到像样的，就决定自己干一个了。先看效果： 起个度量值，然后去power bi 插件那边搜索html Content，把这个放进html content插件的字段values即可。 HTML倒计时每周…...

编程日记 2025/6/28 21:59:04

镜像管理（2）Dockerfile总结

一、docker镜像构建方法 commoit ：使用 docker commit 意味着所有对镜像的操作都是黑箱操作，生成的镜像也被称为黑箱镜像，换句话说，就是除了制作镜像的人知道执行过什么命令、怎么生成的镜像，别人根本无从得知。而且，即使是这个制作镜像的人，过一段时间后也无法记清具…...

编程日记 2025/6/28 23:48:26

【Tools】neovim操作指南

Neovim 中最常见、最实用的操作, 主要针对C 开发需求： 🚀 基础操作操作快捷键说明保存:w 或 ZZ保存当前文件退出:q 或 ZQ退出当前窗口保存并退出:wq 或 ZZ保存并退出强制退出:q!不保存直接退出撤销u撤销上一步重做<C-r>重做撤销搜索/xxx向下搜索…...

编程日记 2025/6/28 22:05:05

docker 安装 Nacos

下载镜像 docker pull nacos/nacos-server创建本地目录 mkdir -p /home/nacos/conf /home/nacos/logs运行镜像 docker run -d -p 8848:8848 -e MODEstandalone -e PREFER_HOST_MODEhostname -v /home/nacos/init.d/custom.properties:/home/nacos/init.d/custom.properties …...

编程日记 2025/6/28 21:58:50

【嵌入式】【ESP32】ADF框架

推荐阅读： [005] [ESP32开发笔记] ADF基本框架...

编程日记 2025/6/28 21:58:16

Redisson分布式集合原理及应用

Redisson是一个用于Redis的Java客户端，它简化了复杂的数据结构和分布式服务的使用。适用场景对比数据结构适用场景优点RList消息队列、任务队列、历史记录分布式共享、阻塞操作、分页查询RMap缓存、配置中心、键值关联数据支持键值对、分布式事务、TTLRSet去重集…...

编程日记 2025/6/29 1:31:05

一种新兴的网络安全技术：XDR（Extended Detection and Response，扩展检测与响应）（Grok3 DeepSearch模式下回答）

直接回答 XDR（扩展检测与响应）是一种网络安全技术，整合多层数据（如端点、网络、云）以检测和响应威胁。研究表明，它通过AI和自动化提高安全团队效率，减少数据泄露成本。存在原生XDR（…...

编程日记 2025/6/30 8:08:28

使用 Qt Designer 开发

Qt Designer 是属于 Qt Creator 的一个功能而已，Qt Designer 也叫 UI 设计师或者 UI 设计器，这都是指的同一个东西而已。一、在ui文件添加一个按钮 1、新建一个项目项目名为 02_designer_example 构建系统可选择 CMake ， qmake, Qbs 对…...

编程日记 2025/7/8 20:24:58

第7天-Python+PyEcharts实现股票分时图实战教程

分时图是金融领域常用的可视化形式，能够清晰展示价格随时间变化的趋势。本教程将手把手教你用PyEcharts库实现专业级分时图效果。一、环境准备 bash 复制下载 pip install pyecharts # 核心可视化库 pip install pandas # 数据处理支持二、基础分时图实现 1. 模拟…...

编程日记 2025/7/10 12:50:21