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

vue3在ts中动态添加DOM（1、使用render函数，2、使用tsx）

news 来源：原创 2025/8/19 2:06:41

1、使用render函数和h函数

h函数创建虚拟节点（VNode），render函数实现虚拟节点生成真实DOM元素
实现添加一个el-button按钮

<script setup lang="ts">
import { ElButton } from "element-plus"; //需要在页面中引入，不然使用报警告const renderButton = {render: () => {return h(ElButton,{type: "primary",onClick: () => {console.log("点击了按钮");},},"按钮");},
};
</script>

使用：

<renderButton />

效果：在这里插入图片描述

2、使用tsx：< script setup lang=“tsx”>

tsx：在 TS 文件中使用 JSX 语法
JSX：在 JavaScript 代码中编写类似 HTML 的标记
（< script setup lang=“tsx”> 是 < script setup lang=“ts”> 的超集，不仅支持ts还支持jsx）

<script setup lang="tsx"> // 这里定义脚本使用语言为tsx
import { ElButton } from "element-plus"; //需要在页面中引入，不然使用报警告
const renderButton = () => {return (<ElButton type="primary" onClick={() => console.log("点击了按钮")}>按钮</ElButton>);
};
</script>

使用：

<renderButton />

效果：在这里插入图片描述

相关文章：

vue3在ts中动态添加DOM（1、使用render函数，2、使用tsx）

1、使用render函数和h函数 h函数创建虚拟节点&#xff08;VNode&#xff09;&#xff0c;render函数实现虚拟节点生成真实DOM元素 实现添加一个el-button按钮 <script setup lang"ts"> import { ElButton } from "element-plus"; //需要在页面中引…...

编程日记 2025/8/19 2:06:41

C++基础（VScode环境安装）

MinGW Distro - nuwen.net 安装完成之后我们打开刚刚的安装路径&#xff0c;找到并打开MinGW -> bin,进入bin文件夹之后点一下这里&#xff0c;右键复制路径 之后我们进入设置&#xff0c;搜索“环境变量”&#xff0c;选择“编辑系统环境变量” 按WinR,输入cmd&#xff0…...

编程日记 2025/8/19 2:06:23

MySQL：SQL优化实际案例解析（持续更新）

文章目录 一、MySQL&#xff1a;SQL优化1、时间格式化问题&#xff08;字符串&#xff09;2、in/inner join的问题 一、MySQL&#xff1a;SQL优化 1、时间格式化问题&#xff08;字符串&#xff09; -- 优化前 SELECT * FROM test_table WHERE date_format( begin_time, %Y-%…...

编程日记 2025/8/16 9:53:10

代理（Delegate）、闭包（Closure）、Notification（通知中心） 和 swift_event_bus适用场景和工作方式

在 Swift 开发中&#xff0c;在 Swift 开发中&#xff0c;代理&#xff08;Delegate&#xff09;、闭包&#xff08;Closure&#xff09;、Notification&#xff08;通知中心&#xff09; 和 swift_event_bus 主要用于 组件之间的通信&#xff0c;但它们的适用场景和工作方式有…...

编程日记 2025/8/19 2:06:24

力扣第585题

with t as (select *, count(tiv_2015) over(partition by tiv_2015) cnt1 , count(*) over(partition by lat,lon) cnt2 from insurance) select round(sum(tiv_2016),2) tiv_2016 from t where cnt1>1 and cnt21; 以上代码的思路&#xff1a; ①明确查询需求&#xff1a…...

编程日记 2025/8/19 2:02:51

C++学习——顺序表（四）

文章目录 前言一、最大连续1的个数二、差的绝对值为K的数对数目三、数组中两元素的最大乘积四、数组元素和与数字和的绝对值的差五、K个元素的最大和六、等差三元组的数目七、移除元素 前言 本文为《C学习》的第14篇文章&#xff0c;今天通过Leetcode的几道题来熟悉顺序表的大…...

编程日记 2025/8/18 14:23:14

java虚拟机(JVM)以及各种参数详解

Java 虚拟机&#xff08;JVM&#xff09;提供了许多参数来调整其行为和性能&#xff0c;以便更好地适应不同的应用场景。理解和使用这些参数对于优化 Java 应用程序的性能非常重要。以下是一些常用的 JVM 参数及其详细说明&#xff1a; 1. 内存管理参数 -Xms<size>&…...

编程日记 2025/8/17 19:34:12

Android电量与流量优化

Android电量与流量优化 一、电量优化基础 1.1 电量消耗原理 Android设备的电量消耗主要来源于以下几个方面： 屏幕显示：屏幕是耗电量最大的硬件之一，尤其是高亮度和高刷新率的屏幕。CPU处理：CPU执行计算任务时会消耗大量电量，尤其是高负载运算。网络通信：移动数据、Wi-…...

编程日记 2025/8/19 2:02:51

机器人运动学与动力学

在当今科技飞速发展的时代&#xff0c;机器人已逐渐渗透到我们生活的方方面面&#xff0c;从工业生产线上的高效作业&#xff0c;到医疗领域的精准辅助&#xff0c;再到家庭服务的贴心陪伴&#xff0c;机器人技术的广泛应用正深刻改变着我们的生活和工作方式。而在机器人技术的…...

编程日记 2025/8/19 2:02:49

【web前端开发】HTML排版标签、HTML语义化标签、常用的文本标签

1、HTML排版标签 标签名 标签含义 单/双标签 h1~h6 …...

编程日记 2025/8/18 6:03:35

Linux的TTY子系统(TTY框架)的重要结构体termios的`c_iflag`字段的BRKINT选项和IGNBRK选项的含义【详解串口的BREAK信号】

引言 要搞清楚结构体termios的c_iflag字段的BRKINT选项和IGNBRK选项的含义&#xff0c;首先要搞清楚BREAK信号的含义。其实当你搞清楚BREAK信号后&#xff0c;结构体termios的c_iflag字段的BRKINT选项和IGNBRK选项的含义你也就自然知道了。 1. 什么是 BREAK 信号&#xff1f;…...

编程日记 2025/8/19 2:02:34

YashanDB认证，YCA证书认证教程，免费证书，内含真题考试题库及答案——五分钟速成

目录 一.账号及平台注册登录流程 二.登录进行设备调试核验 三.考试&#xff08;考完获取分数&#xff09; 四.获取证书 五.题库及答案 一.账号及平台注册登录流程 1-点击这里进行账号注册&#xff08;首次学习必须先注册&#xff0c;有账号之后可以直接在2号链接登录&#…...

编程日记 2025/8/19 2:06:24

网络爬虫-1:发送请求+维持会话+代理设置/超时设置

1.基于get发送请求 2.基于post发送请求 3.维持会话 4.代理设置/超时设置 一.基于get发送请求 1.获取网页源码1 使用json库中的json.loads(),将json格式的字符串变为Python的字典形式 以下通过http://httpbin.org/get网址进行基本练习操作 import requests import json urlh…...

编程日记 2025/8/19 2:02:51

VSCode 配置优化指南：打造极致高效的前端开发环境

VSCode 配置优化指南&#xff1a;打造极致高效的前端开发环境 一、基础环境配置&#xff1a;让开发更流畅 1. 性能优化设置 // settings.json {"files.autoSave": "afterDelay", // 自动保存&#xff08;延迟1秒&#xff09;"files.exclud…...

编程日记 2025/8/19 2:06:24

【实战-解决方案】Webpack 打包后很多js方法报错：not defined

问题分析 在不打包的情况下&#xff0c;方法&#xff08;如 checkLoginStatus、filterSites、initProgressBar 等&#xff09;可以正常运行&#xff0c;而经过 Webpack 打包后报 is not defined 错误&#xff0c;通常有以下几个可能的原因&#xff1a; 全局变量丢失 在 Webpac…...

编程日记 2025/8/19 2:01:18

第16届计算智能与软件工程国际研讨会(CISE 2026)

第16届计算智能与软件工程国际研讨会(CISE 2026) The 16th Intl Conference on Computational Intelligence and Software Engineering(CISE 2026) 时间&#xff1a;2026年1月9-11日 地点&#xff1a;中国 三亚 邮箱投稿&#xff1a;editor1academicx.org 检索&#xff1…...

编程日记 2025/8/17 20:22:12

laravel中 添加公共/通用 方法/函数

一&#xff0c;现在app 下面创建Common目录&#xff0c;然后在创建Common.php 文件 二&#xff0c;修改composer.json文件 添加这个到autoload 中 "files": ["app/Common/Common.php"]"autoload": {"psr-4": {"App\\": &quo…...

编程日记 2025/8/19 2:06:41

Android 自定义View之底部导航栏

文章目录 Android 自定义View之底部导航栏概述代码定义TabIndex定义Tab定义TabView定义NavigationBarFragmentSwitchHelper管理类使用 源码下载 Android 自定义View之底部导航栏 概述 封装一个通用的底部导航栏控件。 代码 定义TabIndex Retention(AnnotationRetention.SOU…...

编程日记 2025/8/19 2:04:30

[Kubernetes] 7控制平面组件

1. 调度 kube- scheduler what 负责分配调度pod到集群节点监听kube-apiserver,查询未分配node的pod根据调度策略分配这些pod&#xff08;更新pod的nodename&#xff09;需要考虑的因素&#xff1a; 公平调度&#xff0c;资源有效利用&#xff0c;QoS&#xff0c;affinity, an…...

编程日记 2025/8/18 14:07:38

定时器Tim输出比较（output compare）

输出比较OC(Output Compare) 输出比较可以通过比较CNT与CCR寄存器值的关系&#xff0c;来对输出电平进行置1、置0或翻转的操作&#xff0c;用于输出一定频率和占空比的PWM波形 每个高级定时器和通用定时器都拥有4个输出比较通道&#xff0c;高级定时器的前3个通道额外拥有死区生…...

编程日记 2025/8/19 2:04:51

Linux Shell 脚本编程极简入门指南

一、学习前提准备 ✅ 环境要求&#xff1a; Linux系统&#xff08;Ubuntu/CentOS等&#xff09;或 WSL (Windows用户) 任意文本编辑器&#xff08;推荐VSCode/Vim&#xff09; 基础命令行操作能力 &#x1f50d; 验证环境&#xff1a; # 查看系统默认Shell echo $SHELL #…...

编程日记 2025/8/19 2:04:50

C++：二分习题

1. 借教室 503. 借教室 - AcWing题库 在大学期间&#xff0c;经常需要租借教室。 大到院系举办活动&#xff0c;小到学习小组自习讨论&#xff0c;都需要向学校申请借教室。 教室的大小功能不同&#xff0c;借教室人的身份不同&#xff0c;借教室的手续也不一样。  面对海…...

编程日记 2025/8/19 2:02:35

【AIGC】计算机视觉-YOLO系列家族

YOLO系列家族 &#xff08;1&#xff09;YOLO发展史&#xff08;2&#xff09; YOLOX&#xff08;3&#xff09; YOLOv6&#xff08;4&#xff09; YOLOv7&#xff08;5&#xff09; YOLOv8&#xff08;6&#xff09; YOLOv9&#xff08;7&#xff09;YOLOv10&#xff08;8&…...

编程日记 2025/8/18 17:11:25

浅谈SSE爬虫

什么是SSE SSE（Server-Sent Events，服务器推送事件）是一种用于在Web应用程序中实现单向实时数据传输的技术。它允许服务器通过HTTP连接向客户端（通常是浏览器）推送更新的数据，而无需客户端主动请求。 目前主流的大模型 就是采用的 SSE，想deepseek、chatgpt、通以千问。…...

编程日记 2025/8/19 2:04:30

Goland如何玩依赖注入——基于gone@v2创建一个service

经过多天的工作&#xff0c;终于把gone2的beta版本发布出去了。在v2版本中&#xff0c;做了很多更新&#xff0c;最大的改进是将一些不必要的概念给隐藏起来了&#xff0c;提供了Provider机制…… 文章目录 1. 安装**gonectr**2.创建项目2.1 项目结构 2.2 简单说明3. 启动项目…...

编程日记 2025/8/18 21:36:55

rpmlib(SetVersions) is needed by can-uilts-v2019.00.0-alt1.aarch64

在我在Linux中安装离线CAN工具时&#xff0c;出现了一个问题&#xff0c; rootwanghuo:~# rpm -ivh can-uilts-v2019.00.0-alt1.aarch64.rpm error: Failed dependencies:rpmlib(SetVersions) is needed by can-uilts-v2019.00.0-alt1.aarch64 意思是尝试安装 can-uilts-v20…...

编程日记 2025/8/18 10:11:33

处理Java中的异常

处理Java中的异常 在 Java 中&#xff0c;异常处理是通过 try-catch-finally 语句来实现的。Java 提供了一种强大的机制&#xff0c;用于捕捉和处理程序运行中的各种错误和异常。通过这种方式&#xff0c;你可以有效地捕捉到可能导致程序崩溃的错误&#xff0c;并做出相应的处…...

编程日记 2025/8/19 1:58:36

mac 苍穹外卖 前端环境配置

博主的 mac 是 m2。 结合以下两篇&#xff0c;成功配置前端环境。 macOS 配置苍穹外卖前端环境_macbook怎么nginx下载外卖-CSDN博客 苍穹外卖-Mac配置前端开发环境_sudo 启动 nginx 有什么区别-CSDN博客 一、安装nginx 我使用的是 homebrew&#xff0c;homebrew 的安装请自…...

编程日记 2025/8/19 2:00:31

前端系统测试（单元、集成、数据|性能|回归）

有关前端测试的面试题 系统测试 首先，功能测试部分。根据资料，单元测试是验证最小可测试单元的正确性，比如函数或组件。都提到了单元测试的重要性，强调其在开发早期发现问题，并通过自动化提高效率。需要整合我搜索到的资料中的观点，比如单元测试的方法（接口测试、路径覆…...

编程日记 2025/8/19 1:59:42

Python:函数式编程

函数式编程&#xff08;Functional Programming, FP&#xff09;是一种编程范式&#xff0c;强调通过纯函数、不可变数据和声明式风格来构建程序。Python 虽然不是纯函数式语言&#xff0c;但提供了丰富的函数式编程工具。(简单来说是&#xff0c;函数约等于模块功能&#xff0…...

编程日记 2025/8/18 1:27:16

Spring Boot中@Valid 与 @Validated 注解的详解

Spring Boot中Valid 与 Validated 注解的详解 引言 在Spring Boot应用中&#xff0c;参数校验是确保数据完整性和一致性的重要手段。Valid和Validated注解是Spring Boot中用于参数校验的两个核心注解。本文将详细介绍这两个注解的用法、区别以及代码样例。 Valid注解 功能介…...

编程日记 2025/8/19 2:04:50

[动手学习深度学习]12.权重衰退

1.介绍 权重衰退是常见的处理过拟合的方法 控制模型容量方法 把模型控制的比较小&#xff0c;即里面参数比较少使参数选择范围小 约束就是正则项 每个特征的权重都大会导致模型复杂&#xff0c;从而导致过拟合。 控制权重矩阵范数可以使得减少一些特征的权重&#xff0c;甚至…...

编程日记 2025/8/16 12:46:14

JVM内存结构笔记04-字符串常量池

文章目录 定义字符串常量池的位置JDK 1.7 为什么要将字符串常量池移动到堆中&#xff1f; StringTable案例1案例2案例3 String.intern()案例4案例5案例6总结 StringTable 垃圾回收案例1.创建100个字符串(不会触发垃圾回收)2.创建10000个字符串(触发垃圾回收) StringTable 性能调…...

编程日记 2025/8/16 9:51:03

STM32 HAL库实战：高效整合DMA与ADC开发指南

STM32 HAL库实战&#xff1a;高效整合DMA与ADC开发指南 一、DMA与ADC基础介绍 1. DMA&#xff1a;解放CPU的“数据搬运工” DMA&#xff08;Direct Memory Access&#xff09; 是STM32中用于在外设与内存之间直接传输数据的硬件模块。其核心优势在于无需CPU干预&#xff0c;…...

编程日记 2025/8/17 20:51:54

c语言闯算法--常用技巧

双指针 类别&#xff1a; 同向快慢指针 异常情况&#xff0c;慢指针才动 双向指针 视情况&#xff0c;左右指针动 最长无重复子串 int max(int a, int b){if(a < b){return b;}else{return a;} } int lengthOfLongestSubstring(char* s) {int count[300];for(int i 0; i …...

编程日记 2025/8/18 21:33:41

docker启动jenkins，jenkins中调用docker

在jenkins中执行docker 思路 jenkins中安装docker客户端&#xff0c;使用第三方的docker(需要付费)。jenkins中安装docker客户端&#xff0c;另一个容器中安装docker服务&#xff0c; docker-in-docker&#xff0c;需要特权模式&#xff0c;或者第三方的工具。jenkins中什么都…...

编程日记 2025/8/16 13:06:19

【设计模式】设计模式介绍

一、设计模式概述 设计模式分很多种&#xff0c;每种一般都用于解决某个软件开发过程中的问题。许多人认为设 计模式有23种&#xff0c;其实&#xff0c;对于这个数字也没必要那么教条&#xff0c;当然还有更多的设计模式种类&#xff0c;只 不过是这23种比较经典而已。甚至可…...

编程日记 2025/8/16 9:47:52

图形学面试题总结

图形学面试题总结 文章目录 图形学面试题总结Opengl 与 Vulkan1、OpenGL的渲染管线有哪些主要阶段&#xff1f;分别做什么&#xff1f;2、OpenGL中的VAO、VBO和EBO分别是什么&#xff1f;为什么需要它们&#xff1f;3、细分着色器与几何着色器是什么4、Vulkan与Opengl的区别是什…...

编程日记 2025/8/16 9:50:58

Spring Cloud Alibaba 实战：Sentinel 保障微服务的高可用性与流量防护

1.1 Sentinel 作用 Sentinel 是阿里巴巴开源的一款 流量控制和熔断降级 框架&#xff0c;主要用于&#xff1a; 流量控制&#xff1a;限制 QPS&#xff0c;防止流量暴增导致系统崩溃熔断降级&#xff1a;当某个服务不可用时自动降级&#xff0c;避免故障扩散热点参数限流&…...

编程日记 2025/8/18 5:50:09

Comfyui 与 SDwebui

ComfyUI和SD WebUI是基于Stable Diffusion模型的两种不同用户界面工具&#xff0c;它们在功能、用户体验和适用场景上各有优劣。 1. 功能与灵活性 ComfyUI&#xff1a;ComfyUI以其节点式工作流设计为核心&#xff0c;强调用户自定义和灵活性。用户可以通过连接不同的模块&…...

编程日记 2025/8/16 9:50:05

面试之《前端常见的设计模式》

前端开发中运用多种设计模式可以提高代码的可维护性、可扩展性和可复用性。以下是一些常见的前端设计模式&#xff1a; 创建型模式 1. 单例模式 定义&#xff1a;确保一个类只有一个实例&#xff0c;并提供一个全局访问点。应用场景&#xff1a;在前端中&#xff0c;像全局状…...

编程日记 2025/8/16 10:40:26

PostgreSQL异常：An IO error occurred while sending to the backend

在使用PostgreSQL数据库批量写入数据的时候&#xff0c;遇到了一个问题&#xff0c;异常内容如下&#xff1a; Cause: org.postgresql.util.PSQLException: An I/O error occurred while sending to the backend.报错内容 报错提示1 Caused by: org.postgresql.util.PSQLExc…...

编程日记 2025/8/16 9:53:20

嵌入式八股C语言---面向对象篇

面向对象与面向过程 面向过程 就是把整个业务逻辑分成多个步骤,每步或每一个功能都可以使用一个函数来实现面向对象 对象是类的实例化,此时一个类就内部有属性和相应的方法 封装 在C语言里实现封装就是实现一个结构体,里面包括的成员变量和函数指针,然后在构造函数中,为结构体…...

编程日记 2025/8/16 11:36:50

一周学会Flask3 Python Web开发-使用SQLAlchemy动态创建数据库表

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 前面我们定义了模型&#xff0c;我们可以通过sqlalchemy对象提供的create_all()方法来映射和动态创建数据库表。 因为我们用到…...

编程日记 2025/8/16 11:16:12

【spring】springAOP

1.基本概念 AOP即面向切面编程&#xff0c;它利用的是一种横切技术&#xff0c;解剖开封装的对象内部&#xff0c;并将那些影响多个类的公共行为封装到一个可重 用模块&#xff0c;这就是所谓的Aspect方面/切面。所谓的切面&#xff0c;简单点所说&#xff0c;就是将哪些与业务…...

编程日记 2025/8/16 12:35:53

解决VMware虚拟机CentOS 7 忘记登陆密码问题

1. 重启虚拟机&#xff0c;在重启时不停按E键进入初始化脚本编辑界面 2.在初始化脚本编辑界面&#xff0c;按↓键向下拉到最后&#xff0c;找到LANG/zh_CN.UTF-8那里&#xff0c;输入空格&#xff0c;接着添加 "init/bin/sh" 。然后按ctrlX键进入下一步。 3. 在界面中…...

编程日记 2025/8/16 4:32:46

如何在 Windows 10 启用卓越性能模式及不同电源计划对比

在使用 powercfg -duplicatescheme 命令启用 “卓越性能模式”&#xff08;即 Ultimate Performance 模式&#xff09;之前&#xff0c;有几个前提条件需要注意&#xff1a; 前提条件&#xff1a; 系统版本要求&#xff1a;卓越性能模式 仅在 Windows 10 专业版 或更高版本&a…...

编程日记 2025/8/17 11:54:39

基于 GEE 利用 Sentinel-2 数据反演叶绿素与冠层水分含量

目录 1 数据加载与预处理 2 叶绿素含量反演 3 冠层水分反演 4 数据可视化与导出 5 完整代码 6 运行结果 在生态学和环境科学领域&#xff0c;植被的健康状况是评估生态系统稳定性和功能的关键指标之一。而叶绿素含量和冠层水分含量作为反映植被生理状态的重要参数&#x…...

编程日记 2025/8/16 13:04:41

《鸿蒙系统下AI模型训练加速：时间成本的深度剖析与优化策略》

在当今数字化浪潮中&#xff0c;鸿蒙系统凭借其独特的分布式架构与强大的生态潜力&#xff0c;为人工智能的发展注入了新的活力。随着AI应用在鸿蒙系统上的日益普及&#xff0c;如何有效降低模型训练的时间成本&#xff0c;成为了开发者与研究者们亟待攻克的关键课题。这不仅关…...

编程日记 2025/8/17 18:34:39

PyTorch分布式训练

本文结构&#xff1a; 分布式训练概述环境设置数据并行&#xff08;DDP&#xff09;模型并行启动训练性能优化建议示例代码参考资料和相关问题 以下是为您整理的PyTorch分布式训练教程指南&#xff1a; 一、PyTorch分布式训练核心概念 数据并行&#xff1a;通过分割数据集实…...

编程日记 2025/8/16 11:29:09