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

vue3项目通过修改虚拟dom实现向页面上追加内容

news 来源：原创 2025/6/28 18:38:35

前言：

demo效果：

1、刚进页面，渲染welcome.vue组件内容。2、向输入框中输入数据按回车，页面上追加text.vue组件内容，输入框中的数据也被传递给text.vue组件，并在页面上进行了展示。3、点击text.vue组件中的按钮触发自定义事件并传值给App.vue组件，在App.vue组件中进行打印输出！

图片展示：

刚进页面：

输入框输入内容按回车：

点击【结束】按钮触发自定义事件：

正文：

首先要先了解vue3中两个函数的作用：

h()函数，用于创建一个虚拟DOM

render()函数，用于输出虚拟DOM

welcom.vue组件：

<!-- welcom组件 -->
<template><div class="welcom">恭喜您有时间摸鱼学习!</div>
</template>

text.vue组件

<!-- text组件 -->
<template><div class="text"><p>今天来学习h函数和render函数</p><span>输入框内容：{{ userName }}</span><button @click.stop="handleButton">结束</button></div>
</template>
<script setup lang="ts">
const props = defineProps<{userName: string;
}>();
const emits = defineEmits(["ClickBtn"]);
function handleButton() {emits("ClickBtn", `${props.userName}这是您给我的值还给您！`);
}
</script>

app.vue组件

<template><div class="message_wrap" ref="message_wrap"><input v-model="input_value" @keyup.enter="changeInput" /></div>
</template>
<script setup lang="ts">
import { h, render, onMounted, ref } from "vue";//导入组件
import Welcom from "./components/welcome.vue";
import TextCom from "./components/text.vue";let message_wrap_dom: any;
onMounted(() => {message_wrap_dom = document.getElementsByClassName("message_wrap")[0];appendChildrenToPage(message_wrap_dom, Welcom);
});let message_wrap = ref();
function appendChildrenToPage(dom: HTMLElement,componentName: any,value?: string
) {let text = h(componentName, { userName: value, onClickBtn: getValeFromSon });let new_message;if (!message_wrap.value._vnode) {new_message = h("div", { id: "message" }, [text]);} else {new_message = h("div", { id: "message" }, [...message_wrap.value._vnode?.children,text,]);}render(new_message, dom);
}
let input_value = ref("");
function changeInput() {appendChildrenToPage(message_wrap_dom, TextCom, input_value.value);
}
function getValeFromSon(val: any) {console.log(val, "===触发自定义事件===");
}
</script>

vue3项目通过修改虚拟dom实现向页面上追加内容

前言： demo效果： 1、刚进页面，渲染welcome.vue组件内容。2、向输入框中输入数据按回车，页面上追加text.vue组件内容，输入框中的数据也被传递给text.vue组件，并在页面上进行了展示。3、点击text.vue组件中的…...

编程日记 2025/6/28 18:38:35

文章目录 1. Collection集合1-1. 迭代器遍历方式1-2. 通过for循环进行遍历1-3. forEach遍历 2. List集合2-1. ArrayList底层实现原理2-2. LinkedList底层实现原理 3. Set集合3-1. HashSet 底层实现3-2. LinkedHashSet 底层实现3-3. TreeSet 4. Collection集合->总结5. Map集…...

编程日记 2025/6/28 18:00:30

208-Base Camera Link 图像信号模拟器

１、板卡概述该板卡是基于Altra FPGA处理芯片EP3C40F484C8（兼容EP3C16F484C8），模拟产生自定义分辨率的Camera Link 图像信号，并以base Camera Link输出。主要用于作为Camera Link 图像信号模拟器，模拟各类C…...

编程日记 2025/6/28 18:01:06

【创建模式-蓝本模式（Prototype Pattern）】

目录 Overview应用场景代码演示JDK Prototype pattern 更优实践泛型克隆接口 https://doc.hutool.cn/pages/Cloneable/#%E6%B3%9B%E5%9E%8B%E5%85%8B%E9%9A%86%E7%B1%BB The prototype pattern is a creational design pattern in software development. It is used when the t…...

编程日记 2025/6/28 18:00:32

（一）强化学习基础概念及学习路径

目录前言一、强化学习是什么？ 二、强化学习中的基本概念 1.状态 2.动作 3.奖励 4.策略 5.智能体 6.环境 7.智能体与环境交互三、强化学习路径总结前言强化学习（Reinforcement Learning, RL）是机器学习的范式和方法论之一&a…...

编程日记 2025/6/28 18:00:34

Android 好的开源库

1. 权限请求框架 GitHub - getActivity/XXPermissions: Android 权限请求框架，已适配 Android 14 2. 下载框架 GitHub - lingochamp/okdownload: A Reliable, Flexible, Fast and Powerful download engine....

编程日记 2025/6/28 19:15:39

Spring中xxAware接口和InitializingBean接口的作用

question：Aware接口和InitializingBean接口的作用都可以用例如Autowired PostConstruct注解来实现，那么其相比较于注解的实现，优势是什么呢？ 早期的Spring中并不存在注解开发，注解开发是在后期的Spring中引入&#xf…...

编程日记 2025/6/28 18:00:37

Nginx WebDAV扩展模块安装与配置完全指南

Nginx WebDAV扩展模块安装与配置完全指南 nginx-dav-ext-module nginx WebDAV PROPFIND,OPTIONS,LOCK,UNLOCK support [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/ng/nginx-dav-ext-module 项目基础介绍 Nginx WebDAV扩展模块（nginx-dav-ext-module）是由a…...

编程日记 2025/6/28 20:09:52

算法刷题Day16: BM41 输出二叉树的右视图

题目链接描述思路： 递归构造二叉树在Day15有讲到。复习一下，就是使用递归构建左右子树。将中序和前序一分为二。接下来是找出每一层的最右边的节点，可以利用队列层次遍历。利用队列长度记录当前层有多少个节点，每次从队列里…...

编程日记 2025/6/28 19:37:07

1.2 计算机网络的分类和应用（重要知识点）

1.2.1 计算机网络的分类计算机网络的定义： 由通信线路互相连接的、能自主工作的计算机构成，强调各计算机（工作站）拥有独立的计算资源和任务能力。与多终端分时系统不同，后者终端仅作为主机接口，不具备计…...

编程日记 2025/6/28 18:00:36

Xcode

info.plist Appearance Light 关闭黑暗模式 Bundle display name 设置app名称，默认为工程名 Location When In Use Usage Description 定位权限一共有3个key 1.Privacy - Location When In Use Usage Description 2.Privacy - Location Always and When In U…...

编程日记 2025/6/28 19:23:56

HarmonyOS 5.0应用开发——属性动画

【高心星出品】文章目录属性动画animateTo属性动画animation属性动画属性动画属性接口（以下简称属性）包含尺寸属性、布局属性、位置属性等多种类型，用于控制组件的行为。针对当前界面上的组件，其部分属性（如位置属…...

编程日记 2025/6/28 18:02:10

Freertos任务切换

一、操作系统进行任务切换的时机： 采用信号量实现任务的互斥： 二、FreeRTOS 任务切换场合 PendSV 中断的时候提到了上下文(任务)切换被触发的场合： ● 可以执行一个系统调用 ● 系统滴答定时器(SysTick)中断。 1、执行系统调用执行系统…...

编程日记 2025/6/28 18:02:17

【汇编】思考汇编中的两个基本问题

1. 若干年前的疑问几年前还在大学学习汇编时，不管是考试还是课程设计，其实都很顺利。但是心里一直对什么时候使用哪个寄存器存在疑惑，编写汇编时，没有十足的把握，都是抱着试一试的心态去完成了课程任务。工作八年有…...

编程日记 2025/6/28 18:01:26

开发环境服务器 vs 生产环境服务器：开发与生产须分明

【背景】作为开发者，我们在不同的阶段都与两种服务器环境打交道——开发环境服务器和生产环境服务器。虽然听起来名字相似，但它们的职责和工作方式简直是天差地别！ 不知道朋友们有没有跟我一开始刚了解的时候的一些疑惑，因为刚开始…...

编程日记 2025/6/28 18:00:40

Tomcat的安装即使用

Tomcat的概念 Tomcat服务器是Java语言开发的，免费的开放源代码的Web应用服务器。 Tomcat处理静态HTML的能力远不及Apache或者Nginx，通常是作为一个Servlet和JSP容器，单独运行在后端。 Tomcat是由三个功能组合而成： java servlet&…...

编程日记 2025/6/28 19:37:57

外包干了9天，技术退步明显。。。。。

时光荏苒，转眼我已是一个拥有近四年功能测试经验的大专生。19年，我满怀激情地通过校招进入湖南某知名软件公司，期待在这里开启我的职业生涯。然而，长时间的舒适环境让我渐渐失去了前进的动力，技术停滞不前，…...

编程日记 2025/6/28 18:00:38

梳理你的思路(从OOP到架构设计)_基本OOP知识04

目录 1、主动型 vs.基於被动型 API 1）卡榫函数实现API 2）API的分类 3）回顾历史 4）API >控制力 2、结语&复习： 接口与类 1）接口的表示 2）Java的接口表示 1、主动型 vs.基於被动…...

编程日记 2025/6/28 18:56:57

每天40分玩转Django：简介和环境搭建

Django简介和环境搭建一、课程概述学习项目具体内容预计用时Django概念Django框架介绍、MVC/MTV模式、Django特点60分钟环境搭建Python安装、pip配置、Django安装、IDE选择45分钟创建项目项目结构、基本配置、运行测试75分钟实战练习创建个人博客项目框架60分钟二、Djang…...

编程日记 2025/6/28 18:02:06

OpenCV相关函数

一、Sobel算子函数 (cv2.Sobel) 功能 Sobel算子是一个梯度算子，用于边缘检测。通过计算图像中像素的梯度，Sobel算子可以检测出水平和垂直方向上的边缘。参数 src：输入图像。 ddepth：输出图像的深度（如cv2.CV_8U, cv…...

编程日记 2025/6/28 18:03:30

【理想汽车中科院】基于模仿学习的端到端自动驾驶数据缩放规律

论文: https://arxiv.org/pdf/2412.02689 项目: https://github.com/ucaszyp/Driving-Scaling-Law 0. 摘要端到端自动驾驶范式因其可扩展性而最近吸引了大量关注。然而，现有方法受到现实世界数据规模有限的制约，这阻碍了对端到端自动驾驶相关扩展规律…...

编程日记 2025/6/28 18:49:09

重卡补能新未来：光储充换一体开启高效之路

《重卡补能新未来：光储充换一体开启高效之路》一、光储充换一体重卡补能模式的兴起重卡运输行业在电动化进程加速下迎来变革，光储超充快换一体化补能站成为新趋势。随着国家 “双碳” 战略的持续推进，新能源汽车市场蓬勃发展&#xff0c…...

编程日记 2025/6/28 18:00:56

Mybatis Plus 3.0 快速入门

1、简介 MyBatis-Plus （简称 MP）是一个 MyBatis 的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。 2、创建并初始化数据库 2.1、创建数据库 mybatis_plus 2.2、创建 User 表其表结构如下： idnameageemail1Jone18test1@baomidou.com2Jack…...

编程日记 2025/6/28 20:15:54

ABAP:MB51字段增强

MB51所对应的程序：RM07DOCS 1.定义增强字段：RM07DOCS_GENERATED中定义 2.取值：RM07DOCS中detail_list中加取值逻辑也有对ITAB取值做调整的，但是要写很多处，直接这里取值就很简单。 3.展示字段：RM07DOCS中…...

编程日记 2025/6/28 19:42:42

nVisual 定制化APP打包流程

一、下载打包软件 HBuilder X 下载地址：https://dcloud.io/hbuilderx.html 安装:此软件为绿色软件，解压即可使用。进入目录，双击exe启动。此软件需要注册，打开时会提供跳转链接，通过邮箱注册账号。注册成功后&#…...

编程日记 2025/6/28 20:26:24

k8s的节点亲和性NodeAffinity

关键词: ① requiredDuringSchedulingIgnoredDuringExecution：表示强匹配，必须要满足 ② preferredDuringSchedulingIgnoredDuringExecution：表示弱匹配，尽可能满足，但不保证示例： apiVersion: v1 kind:…...

编程日记 2025/6/28 19:23:41

比特币国家与企业机构“战略储备”潮起

100 万枚 BTC 的战略储备资产，是一个什么概念？ 据世界黄金协会统计数据显示，截至 2024 年第三季度，美联储黄金储备总量达 8133.46 吨（约合 5300 亿美元），稳居全球首位。而 100 万枚 BTC 当前市…...

编程日记 2025/6/28 18:32:09

Vue生命周期钩子函数：深入解析与实践

作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以在组件的不同生命周期阶段执行特定的操作…...

编程日记 2025/6/28 20:02:58

mysql、postgresql、oceanbase调优

一、mysql 1、my.cnf [mysqld_safe] log-error=/data/mysql/log/mysql.log pid-file=/data/mysql/run/mysqld.pid[client] socket=/data/mysql/run/mysql.sock default-character-set=utf8[mysqld] basedir=/usr/local/mysql tmpdir=/data/mysql/tmp datadir=/data/mysql/dat…...

编程日记 2025/6/28 20:26:17

相关文章：