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

Vue 3 高级编程技巧

news 来源：原创 2025/7/3 16:49:22

Vue 3 高级编程技巧

1. 计算属性 (Computed Properties)

含义：计算属性在依赖变化时会自动更新。以下是一个示例，展示当 firstName 或 lastName 变化时，fullName 也会更新。

实例：

<script setup>
import { ref, computed } from 'vue';const firstName = ref('John');
const lastName = ref('Doe');// 计算属性
const fullName = computed(() => {return `${firstName.value} ${lastName.value}`;
});const reversedFullName = computed(() => {return fullName.value.split('').reverse().join('');
});const fullNameLength = computed(() => {return fullName.value.length;
});
</script><template><div><input v-model="firstName" placeholder="First Name" /><input v-model="lastName" placeholder="Last Name" /><p>Full Name: {{ fullName }}</p><p>Reversed Full Name: {{ reversedFullName }}</p><p>Full Name Length: {{ fullNameLength }}</p></div>
</template>

2. 插槽 (Slots)

含义：插槽允许组件接收模板内容，并在组件内部渲染这些内容。它们提供了灵活的布局和内容分发机制。使用 #header 或 v-slot 语法来定义插槽内容。

实例：

<!-- ParentComponent.vue -->
<script setup>
import ChildComponent from './ChildComponent.vue';
</script><template><ChildComponent><template #header><h1>Header Content</h1></template><p>Default Slot Content</p></ChildComponent>
</template><!-- ChildComponent.vue -->
<script setup>
</script><template><div><slot name="header"></slot><slot></slot></div>
</template>

3. 动态组件 (Dynamic Components)

含义：动态组件允许在运行时根据需要切换不同的组件。结合 component 标签和 is 属性实现。

实例：

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';const currentComponent = ref('ComponentA');
</script><template><component :is="currentComponent" /><button @click="currentComponent = 'ComponentA'">Show Component A</button><button @click="currentComponent = 'ComponentB'">Show Component B</button>
</template>

4. 自定义指令 (Custom Directives)

含义：自定义指令用于直接操作 DOM 元素，可以用于添加事件监听器、修改样式等。

实例：

<script setup>
import { onMounted } from 'vue';const vFocus = {mounted(el) {el.focus();}
};const vHighlight = {mounted(el) {el.style.backgroundColor = 'yellow';}
};const vLog = {mounted(el) {console.log('Element mounted:', el);}
};
</script><template><input v-focus /><div v-highlight>Highlighted Text</div><div v-log>This element logs to console on mount.</div>
</template>

5. `watch`

含义：watch 用于观察和响应 Vue 实例上的数据变动。当数据发生变化时，watch 可以执行异步操作或开销较大的操作，并获取变化前后的值。

实例：

<script setup>
import { ref, watch } from 'vue';const message = ref('Hello Vue!');
const count = ref(0);
const items = ref(['apple', 'banana', 'cherry']);
const user = ref({ name: 'Alice', age: 30 });// 监听单个响应式变量
watch(message, (newVal, oldVal) => {console.log(`message changed from ${oldVal} to ${newVal}`);
});// 监听对象属性
watch(() => user.value.name,(newName, oldName) => {console.log(`user name changed from ${oldName} to ${newName}`);}
);// 监听数组的单个元素
watch(() => items.value[0],(newVal, oldVal) => {console.log(`First item changed from ${oldVal} to ${newVal}`);}
);// 监听多个响应式变量
watch([message, count], ([newMessage, newCount], [oldMessage, oldCount]) => {console.log(`message changed from ${oldMessage} to ${newMessage}`);console.log(`count changed from ${oldCount} to ${newCount}`);
});// 监听数组的多个元素
watch([() => items.value[0], () => items.value[1]],([newFirst, newSecond], [oldFirst, oldSecond]) => {console.log(`First item changed from ${oldFirst} to ${newFirst}`);console.log(`Second item changed from ${oldSecond} to ${newSecond}`);}
);// 深度监听对象
watch(user,(newVal) => {console.log('user changed:', newVal);},{ deep: true }
);
</script><template><div><input v-model="message" placeholder="Message" /><button @click="count++">Increment Count: {{ count }}</button><button @click="items[0] = 'orange'">Change First Item</button><button @click="items[1] = 'grape'">Change Second Item</button><button @click="user.name = 'Bob'">Change User Name</button></div>
</template>

6. `provide` + `inject`

含义：provide 和 inject 用于在组件树中传递数据，适用父子组件,查找第一层父/子组件传递的数据

实例：

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const theme = ref('dark');
provide('theme', theme);
</script><template><ChildComponent />
</template><!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';const theme = inject('theme');
</script><template><div :class="theme">Current theme: {{ theme }}</div>
</template>

Vue 3 高级编程技巧

Vue 3 高级编程技巧 1. 计算属性 (Computed Properties) 含义：计算属性在依赖变化时会自动更新。以下是一个示例，展示当 firstName 或 lastName 变化时，fullName 也会更新。实例： <script setup> import { ref, comput…...

编程日记 2025/7/3 16:49:22

GraphQL注入 -- GPN CTF 2025 Real Christmas

part 1 服务器会每段时间禁用已注册的账号,此处存在漏洞 def deactivate_user_graphql(email):graphql_endpoint current_app.config["GRAPHQL_ENDPOINT"]query f"""mutation {{deactivateUser (user: {{email: "{email}"}}){{ success…...

编程日记 2025/7/3 16:08:21

python打卡day43

疏锦行作业： kaggle找到一个图像数据集，用cnn网络进行训练并且用grad-cam做可视化进阶：并拆分成多个文件 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms# 数据预处理 tra…...

编程日记 2025/7/3 10:07:55

ethers.js express vue2 定时任务每天凌晨2点监听合约地址数据同步到Mysql整理

下面是一个完整的 Ethers.js Express Vue2 MySQL 实现方案，用于： 💡每天凌晨 2 点监听某合约地址的 Transfer 事件，写入 MySQL 数据库，并展示每日 NFT 交易量图表（Vue2 ECharts） ✅ 后端部分…...

编程日记 2025/7/3 14:23:05

内网穿透和端口映射的区别在哪？局域网提供互联网访问方案对比选择详解

内网穿透和端口映射是两个经常被提及的概念，它们对于实现网络中的内外网通信起着关键作用。内网穿透和端口映射都能够有效地将本地局域网地址提供给互联网上外网访问，但二者之间存在着显著的区别。内网穿透与端口映射的核心区别在于实现方式和依赖条件…...

编程日记 2025/7/3 15:06:36

机器学习---正则化、过拟合抑制与特征筛选

专栏:机器学习个人主页:云端筑梦狮注：上一篇机器学习还差一小节，日后坑必会填上一.正则化什么是正则化 / 如何进行正则化其实机器学习中正则化（regularization）的外在形式非常简单，就是在模型的损失函数中加…...

编程日记 2025/7/3 16:15:10

优化 ArcPy 脚本性能

合理设置环境变量优化环境变量配置 ArcPy 提供了许多环境变量，用于控制地理处理工具的行为。合理设置环境变量可以优化脚本的性能。例如，设置“workspace”环境变量可以指定默认的工作空间，避免在脚本中重复指定工作空间路径。 Python 复制…...

编程日记 2025/7/3 16:24:42

Robyn高性能Web框架系列06：使用WebSocket实现产品智能助理

使用WebSocket实现产品智能助理 WebSocket原理与应用场景Robyn的WebSocket基本使用1、创建WebSocket服务2、侦听WebSocket事件3、向客户端发送消息4、向客户端广播消息5、使用查询参数6、主动关闭连接示例：简易的产品智能助理1、产品数据部分2、产品信息部分3、智能…...

编程日记 2025/7/3 16:06:07

UDP 缓冲区

UDP 有接收缓冲区，没有发送缓冲区引申问题 1、为什么没有发送缓冲区？ 直接引用原文 “因为 UDP 是不可靠的，它不必保存应用进程的数据拷贝，因此无需一个真正的发送缓冲区” 2、没有发送缓冲区的情况下，sendto 的数…...

编程日记 2025/7/3 15:51:02

物联网与低代码：Node-RED如何赋能工业智能化与纵横智控的创新实践

在数字化浪潮席卷全球的今天，物联网（IoT）已从概念走向现实，成为连接物理世界与数字世界的关键桥梁。它通过将日常物品、工业设备等“物”嵌入传感器、软件及其他技术，使其能够通过网络相互连接并交换数据，从…...

编程日记 2025/7/3 16:02:25

【甲方安全视角】开源的安全悖论

文章目录安全的充分必要条件：从「符号化信任」到「验证驱动安全」构建与分发的不可信链条迭代与审计的节奏错位代码透明与攻击面的对等暴露对普通用户的建议选择可信项目与品牌始终通过官方渠道获取软件注意权限与环境安全对“签名请求”、“连接钱包”等敏感操作保…...

编程日记 2025/7/3 14:30:27

GEO生成式引擎优化发展迅猛：热点数智化传播是GEO最佳路径

在人工智能技术浪潮的推动下，GEO生成式引擎优化已跃升为行业技术演进与产业发展相融合的核心赛道。通过系统性梳理其发展脉络，我们可清晰勾勒出技术突破与产业变革交织的演进轨迹，其发展进程包含以下重要节点。 2023年4月，GPT-4发…...

编程日记 2025/7/3 14:51:15

【unity游戏开发——网络】计算机网络中的三种数据管理模型（分散式、集中式、分布式）和三大通信模型（C/S、B/S、P2P）

注意：考虑到热更新的内容比较多，我将热更新的内容分开，并全部整合放在【unity游戏开发——网络】专栏里，感兴趣的小伙伴可以前往逐一查看学习。文章目录一、数据管理模型1、分散式 (Decentralized - 各管各的)2、集中式 (Centra…...

编程日记 2025/7/3 15:07:28

MR30分布式 IO在物流堆垛机的应用

在现代物流行业蓬勃发展的浪潮中，物流堆垛机作为自动化仓储系统的核心设备，承担着货物的高效存取与搬运任务。它凭借自动化操作、高精度定位等优势，极大地提升了仓储空间利用率和货物周转效率。然而，随着物流行业的高速发展&#…...

编程日记 2025/7/3 7:53:32

香港维尔利健康科技集团推出AI辅助医学影像训练平台，助力医护人才数字化转型

香港维尔利健康科技集团近日正式发布其自主研发的“AI辅助医学影像训练平台（V-MedTrain）”，这一创新平台的上线，标志着医学影像教育迈入智能化辅助教学新时代。依托人工智能与大数据分析技术，香港维尔利健康科技集团在…...

编程日记 2025/7/3 14:15:27

2025学年湖北省职业院校技能大赛 “信息安全管理与评估”赛项样题卷（五）

2025学年湖北省职业院校技能大赛 “信息安全管理与评估”赛项样题卷（五） 第二部分：网络安全事件响应、数字取证调查、应用程序安全任务书任务 1：应急响应（可以培训有答案）任务 2：通信数据分析取…...

编程日记 2025/7/3 14:46:25

基于 Python 的批量文件重命名软件设计与实现

在工作过程中，经常有很多文件，想要对文件名进行批量改名，特此写了一个程序，以实现此功能。一、批量文件重命名软件设计原理（一）核心原理阐述批量文件重命名软件的核心原理在于运用操作系统提供的文件管理功能，借助编程手段达成对文件名称的批量修改。在这个软件里，…...

编程日记 2025/6/30 18:36:01

【深度学习新浪潮】什么是上下文工程？

什么是上下文工程？上下文工程（Context Engineering）是指通过设计、优化与大语言模型（LLM）交互时的输入内容（即“上下文”），引导模型生成更符合预期、更精准回答的系统性方法。这里的“上下文”通常包括提示词（Prompt）、示例（Few-Shot Examples）、历史对话记录、…...

编程日记 2025/7/3 13:45:46

逆向入门（8）汇编篇-rol指令的学习

还是那个题，这回又碰到个循环左移，有挺多操作方法之前都没有系统的学，用到的时候再看看感觉还挺好，不耽误事 0x00 基本介绍 ROL(Rotate Left): 循环左移，它有两个操作数： 第一个操作数是目标操作数&#…...

编程日记 2025/7/3 15:36:39

Fisco Bcos学习 - 开发第一个区块链应用

文章目录一、前言二、业务场景分析：简易资产管理系统三、智能合约设计与实现3.1 存储结构设计3.2 接口设计3.3 完整合约代码四、合约编译与Java接口生成五、SDK配置与项目搭建5.1 获取Java工程项目5.2 项目目录结构5.3 引入Web3SDK5.4 证书与配置文件六、业务开发…...

编程日记 2025/7/3 14:20:58

黑马python（十六）

目录： 1.JSON数据格式的转换 2.pyecharts模块简介 3.pyecharts入门使用 4.数据准备 5.生成折线图 1.JSON数据格式的转换 2.pyecharts模块简介官方网站： 画廊网站:有更多的图标形式测试是否安装 3.pyecharts入门使用运行会生成一个html的文件&a…...

编程日记 2025/7/3 16:10:51

完成国产化替代！昆明卷烟厂用时序数据库 TDengine 重塑工业时序数据平台

小T导读：昆明卷烟厂作为红云红河烟草（集团）有限责任公司的重要组成部分，是集团卷烟生产的核心工厂。早期在建设制造执行系统（MES）时，其采用了 Wonderware 平台的时序数据存储功能模块&#xff0…...

编程日记 2025/7/3 14:36:17

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | BackgroundSlider（背景滑块）

📅 我们继续 50 个小项目挑战！—— BackgroundSlider组件仓库地址：https://github.com/SunACong/50-vue-projects 项目预览地址：https://50-vue-projects.vercel.app/ 使用 Vue 3 的 Composition API 和 <script setup> …...

编程日记 2025/6/30 18:35:46

Wpf的Binding

前言 wpf的Binding就像一个桥梁，它的作用就是连接逻辑层与界面层，既能够把逻辑层的数据搬到界面层展示，又能将界面层的数据更改后传递到逻辑层，Binding的数据来源就是Binding的源，数据展示的地方就是Binding的目标。 …...

编程日记 2025/7/3 14:00:10

Redis—持久化

持久化在mysql当中，有4个比较关心的特性，分别是原子性、一致性、隔离性和持久性。这里的持久性和持久化是一回事。我们该如何判断是否具有持久性呢？答案就是看重启进程或者主机之后，数据是否存在。当我们把数据存储在硬盘上是就…...

编程日记 2025/7/3 14:04:50

Spring Boot中日志管理与异常处理

以下是Spring Boot中日志管理与异常处理的系统化实践指南，结合最佳实践与核心配置，确保应用健壮性与可维护性。 📊 一、日志管理核心配置默认框架与级别控制 Logback 是Spring Boot默认日志框架，通过application.yml快速配置&…...

编程日记 2025/7/3 15:10:01

基于MATLAB的BP神经网络的心电图分类方法应用

说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景心电图（ECG）是临床诊断心血管疾病的重要工具，能够反映心脏电活动的周期性变化。…...

编程日记 2025/7/3 14:02:33

【笔记】Docker 配置阿里云镜像加速（公共地址即开即用，无需手动创建实例）

2025年06月25日记【好用但慎用】Windows 系统中将所有 WSL 发行版从 C 盘迁移到非系统盘的完整笔记（附异常处理）-CSDN博客【笔记】解决 WSL 迁移后 Docker 出现 “starting services: initializing Docker API Proxy: setting up docker ap” 问题…...

编程日记 2025/7/3 14:38:07

Java 中LinkedList 总结

406.根据身高重建队列力扣题目链接(opens new window) 假设有打乱顺序的一群人站成一个队列，数组 people 表示队列中一些人的属性（不一定按顺序）。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi ，前面正好有 ki 个身高…...

编程日记 2025/7/3 11:58:52

微信小程序 / UNIAPP --- 阻止小程序返回（顶部导航栏返回、左 / 右滑手势、安卓物理返回键和调用 navigateBack 接口）

目录理解page-container的原理设置禁止点击遮盖层关闭？ 阻止左滑返回理解page-container的原理 page-container组件的所有属性，最重要的是show值。在页面上引入这个组件后，若show值为true，页面上所有各种方式触发的返回操作…...

编程日记 2025/7/2 18:35:15

Linux基本指令篇 —— mv指令

在Windows中我们经常使用CtrlX和CtrlV将一个地方的文件或目录移动到另一个地方，我们若是要在Linux当中完成此操作，则需要使用mv指令。mv 是 Linux 系统中用于移动或重命名文件和目录的基本命令之一，是 "move" 的缩写。下面将详细介…...

编程日记 2025/7/3 13:48:32

基于STM32的智能节能风扇的设计

基于STM32的智能节能风扇的设计内容:1.摘要本设计旨在解决传统风扇能耗高、功能单一的问题，提出一种基于STM32的智能节能风扇。通过结合温度传感器、人体红外传感器等多种传感器，利用STM32微控制器实现对风扇的智能控制。经过实际测试，该智…...

编程日记 2025/7/3 15:13:08

HCIA-IP路由基础

前言：本博客仅作记录学习使用，部分图片出自网络，如有侵犯您的权益，请联系删除本篇笔记是根据B站上的视频教程整理而成，感谢UP主的精彩讲解！如果需要了解更多细节，可以参考以下视频&#xf…...

编程日记 2025/7/3 16:00:37

Linux 内存管理之page cache

文章目录一、page cache1.1 File-backed pages和Anonymous pages1.2 page cache/slab cache1.3 读/写路径1.4 脏页回写1.5 drop_caches1.6 时间局部性与空间局部性1.7 Page Cache 的两种类型1.8 关键数据结构二、Page Cache 的产生2.1 Buffered I/O（标准 I/O&…...

编程日记 2025/7/3 14:41:52

uniApp实战四：网络请求封装

文章目录 1.最终效果预览2.请求封装3.创建config配置文件4.创建api请求5.页面调用说明：当前笔记基于Vue3开发，HbuilderX版本4.66 1.最终效果预览 2.请求封装在util/request.js下创建js文件，代码如下 import config from /configconst tim…...

编程日记 2025/7/3 14:36:16

sentinel 自定义 dashboard 用户名密码

默认情况下，sentinel dashboard 用户名密码为 sentinel / sentinel ，这里我使用重写镜像的方式： // 定义 Dockerfile $ cat Dockerfile # 基于现有 Sentinel Dashboard 镜像 FROM bladex/sentinel-dashboard:1.8.4# 重新定义 ENTRYPOINT&…...

编程日记 2025/7/3 14:19:06

Fisco Bcos学习 - 搭建星形拓扑组网

文章目录一、前言二、环境准备与依赖安装2.1 系统要求2.2 依赖安装三、星形拓扑设计与节点规划四、使用build_chain.sh构建星形拓扑4.1 创建操作目录并获取脚本4.2 生成星形拓扑配置文件4.3 执行构建命令4.4 查看生成的节点文件五、启动节点与共识验证5.1 启动所有节点5.2 查…...

编程日记 2025/7/3 15:42:27

深度学习入门--（二）感知机

一.感知机是什么简单的输入和输出，感觉（输入），知道（输出，作出反应） 二.简单逻辑电路 2.1与门 import numpy as np #AND def AND(X1,X2):w1,w2,thera0.5,0.5,0.7tmpX1*w1X2*w2if tmp>the…...

编程日记 2025/7/3 14:20:04

LeetCode 3298.统计重新排列后包含另一个字符串的子字符串数目2

给你两个字符串 word1 和 word2 。如果一个字符串 x 重新排列后，word2 是重排字符串的前缀 ，那么我们称字符串 x 是合法的。请你返回 word1 中合法子字符串的数目。注意 ，这个问题中的内存限制比其他题目要小 ，所以你…...

编程日记 2025/7/3 13:45:45

【nRF52832】【环境搭建 1】【ubuntu下搭建nRF52832开发环境】

本文讲述如何在 ubuntu 22.04 下开发 nRF52832. host 环境说明: $ uname -a Linux leo 6.8.0-60-generic #63~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Tue Apr 22 19:00:15 UTC 2 x86_64 x86_64 x86_64 GNU/Linux1. 安装软件 sudo apt install gcc-arm-none-eabisudo apt-get i…...

编程日记 2025/7/3 14:19:05

Django

1. Django 和 Tornado 的关系 Django 是一个高级 Python Web 框架，它鼓励快速开发和干净、实用的设计。Django 遵循 MVC（模型-视图-控制器）设计模式的一个变种，称为 MTV（模型-模板-视图）。Django 框架提供…...

编程日记 2025/7/3 14:37:15

51c嵌入式~CAN~合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/14016935 一、CAN总线常见信号干扰问题定位干扰原因当总线有干扰时，有经验的工程师能够迅速定位，但是对于新手来说却很麻烦。造成总线干扰的原因有很多，比如通过电磁辐射耦合到通…...

编程日记 2025/7/3 13:57:15

【iOS】iOS崩溃总结

【iOS】iOS崩溃总结一、前言之前写了一篇博文《【Flutter】程序报错导致的灰屏总结》，浏览量、收藏率和点赞量还挺高，还被收录了，就想着总结一下iOS崩溃，这个也是在iOS面试中经常被问到的。在 iOS 开发过程中，导致…...

编程日记 2025/7/3 14:40:00

npm 报错：“无法加载文件 ...npm.ps1，因为在此系统上禁止运行脚本” 解决方案（附执行策略说明）

在使用 npm 命令时，部分 Windows 用户可能会遇到如下错误： npm : 无法加载文件 D:\nvm4w\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https://go.microsoft.com/fwlink/?LinkID135170 中的 about_Executi…...

编程日记 2025/7/3 10:58:15

AES加密：为你的PDF文档加上一道钢铁防线

在数字化时代，确保敏感数据的安全性至关重要。加密技术在保护信息免受未经授权访问方面起着关键作用。而在众多加密标准中，AES（高级加密标准）因其强大的安全性和广泛的应用而脱颖而出。那么，AES加密如何应用到PDF文档中…...

编程日记 2025/7/3 16:01:32

2025学年湖北省职业院校技能大赛 “信息安全管理与评估”赛项样题卷（一）

2025学年湖北省职业院校技能大赛 “信息安全管理与评估”赛项样题卷（一） 第一部分：网络平台搭建与设备安全防护任务书DCRS:DCFW:DCWS:WAF: 第二部分：网络安全事件响应、数字取证调查、应用程序安全任务书任务 1：应急响…...

编程日记 2025/7/3 13:47:36

1688商品发布API：自动化上架与信息同步

一、1688商品发布API的核心功能与技术架构 1.1 API功能全景 1688商品发布API是1688开放平台的核心组件之一，支持商品信息的自动化发布、编辑、上下架及库存同步。其核心功能包括： 商品信息管理：支持商品标题、描述、价格、库存、SKU&#…...

编程日记 2025/7/3 14:00:57

鸿蒙ArkUI---基础组件Tabs（Tabbar）

基础页面组件 Tabs 作用： 快速创建Tabbar 个人理解： 快速的创建Tabar。效果图： 代码：interface TabItem {icon: Resource; //未选中activeIcon: Resource; //选中name: string; //文字 }Entry Component struct Index {// st…...

编程日记 2025/7/1 15:03:06