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

前言:

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>

        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/489522.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL其四,各种函数,以及模拟了炸裂函数创建用户等操作

目录 一、MySQL中的函数 1、IFNULL 2、IF 3、case &#xff08;难点&#xff09; 4、exists(难) --存在的意思 二、常见的函数 1、字符串函数 2、数学函数 3、日期函数 &#xff08;使用频率不是很高&#xff09; 4、其他函数 5、关于字符集的问题 6、mysql炸裂函数…

ArcGIS字符串补零与去零

我们有时候需要 对属性表中字符串的补零与去零操作 我们下面直接视频教学 下面看视频教学 ArcGIS字符串去零与补零 推荐学习 ArcGIS全系列实战视频教程——9个单一课程组合 ArcGIS10.X入门实战视频教程&#xff08;GIS思维&#xff09; ArcGIS之模型构建器&#xff08;Mod…

Artec Leo3D扫描仪在重型机械设备定制中的应用【沪敖3D】

挑战&#xff1a;一家加拿大制造商需要有效的方法&#xff0c;为富于变化且难度较高的逆向工程&#xff0c;快速、安全、准确地完成重型机械几何采集。 解决方案&#xff1a;Artec Leo, Artec Studio, Geomagic for SOLIDWORKS 效果&#xff1a;Artec Leo三维扫描代替过去的手动…

AI绘图:开源Stable Diffusion 3 ComfyUI下载安装方法

AI绘图&#xff1a;开源Stable Diffusion 3 ComfyUI下载安装方法 安装好后软件运行效果&#xff1a; 第一步&#xff1a;安装ComfyUI的最新版本 1、请从下面的地址下载压缩包&#xff0c;并解压缩到硬盘 https://github.com/comfyanonymous/ComfyUI/releases/download/late…

常回家看看之Tcache Stashing Unlink Attack

前言&#xff1a; 在开始了解这个攻击手法的前提&#xff0c;需要先了解一个函数也就是calloc函数&#xff0c;众所周知&#xff0c;当libc版本大于等于2.27的时候会引入tcachebin&#xff0c;而Tcache Stashing Unlink Attack就是发生在2.27版本以上&#xff0c;那么这个和ca…

算法分析与设计之分治算法

文章目录 前言一、分治算法divide and conquer1.1 分治定义1.2 分治法的复杂性分析&#xff1a;递归方程1.2.1 主定理1.2.2 递归树法1.2.3 迭代法 二、典型例题2.1 Mergesort2.2 Counting Inversions2.3 棋盘覆盖2.4 最大和数组2.5 Closest Pair of Points2.6 Karatsuba算法&am…

vue图片之放大、缩小、1:1、刷新、左切换、全屏、右切换、左旋咋、右旋转、x轴翻转、y轴翻转

先上效果&#xff0c;代码在下面 <template><!-- 图片列表 --><div class"image-list"><img:src"imageSrc"v-for"(imageSrc, index) in images":key"index"click"openImage(index)"error"handleI…

如何用状态图进行设计05

到目前为止&#xff0c;我们已经讨论了状态图的原理。这些原理对状态图和扩展状态图都适用。第二章后面的部分主要讲述了扩展状态图的扩展功能。我们将围绕这些增强的功能&#xff0c;使你对BetterState Pro的设计能力有很好的了解。 关于这些内容和其他有关扩展状态图特性的完…

【Spark】Spark Join类型及Join实现方式

如果觉得这篇文章对您有帮助&#xff0c;别忘了点赞、分享或关注哦&#xff01;您的一点小小支持&#xff0c;不仅能帮助更多人找到有价值的内容&#xff0c;还能鼓励我持续分享更多精彩的技术文章。感谢您的支持&#xff0c;让我们一起在技术的世界中不断进步&#xff01; Sp…

Vue3 响应式原理:基于 Proxy 的深度解析与实践

# Vue3 响应式原理&#xff1a;基于 Proxy 的深度解析与实践 引言 在 Vue3 中&#xff0c;响应式系统采用了基于 Proxy 的实现方式&#xff0c;通过 Proxy 对象的代理和反射能力&#xff0c;实现了更加高效、灵活和强大的数据监听和变更检测机制。本文将深度解析 Vue3 的响应式…

Linux DNS 协议概述

1. DNS 概述 互联网中&#xff0c;一台计算机与其他计算机通信时&#xff0c;通过 IP 地址唯一的标志自己。此时的 IP 地址就类似于我们日常生活中的电话号码。但是&#xff0c;这种纯数字的标识是比较难记忆的&#xff0c;而且数量也比较庞大。例如&#xff0c;每个 IPv4 地址…

PH热榜 | 2024-12-13

1. AI Santa by Tavus 标语&#xff1a;随时随地&#xff0c;视频连线圣诞老人&#xff01; 介绍&#xff1a;准备好迎接AI圣诞老人了吗&#xff1f;塔武斯公司推出的这款神奇的节日体验&#xff0c;能让你实时用30多种语言与圣诞老人对话&#xff0c;看看自己今年是乖孩子还…

【QT】编写第一个 QT 程序 对象树 Qt 编程事项 内存泄露问题

目录 1. 编写第一个 QT 程序 1.1 使用 标签 实现 &#x1f407; 图形化界面实现 &#x1f407; 纯代码形式实现 1.2 使用 按钮 实现 &#x1f40b; 图形化界面实现 &#x1f40b; 纯代码形式实现 1.3 使用 编辑框 实现 &#x1f95d; 图形化界面实现 &#x1f95…

pytest入门一:用例的执行范围

从一个或多个目录开始查找&#xff0c;可以在命令行指定文件名或目录名。如果未指定&#xff0c;则使用当前目录。 测试文件以 test_ 开头或以 _test 结尾 测试类以 Test 开头 &#xff0c;并且不能带有 init 方法 测试函数以 test_ 开头 断言使用基本的 assert 即可 所有的…

科研绘图系列:R语言绘制热图和散点图以及箱线图(pheatmap, scatterplot boxplot)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载图1图2图3系统信息参考介绍 R语言绘制热图和散点图以及箱线图(pheatmap, scatterplot & boxplot) 加载R包 library(magrittr) library(dplyr) library(ve…

ArcGIS MultiPatch数据转换Obj数据

文章目录 ArcGIS MultiPatch数据转换Obj数据1 效果2 技术路线2.1 Multipatch To Collada2.2 Collada To Obj3 代码实现4 附录4.1 环境4.2 一些坑ArcGIS MultiPatch数据转换Obj数据 1 效果 2 技术路线 MultiPatch --MultipatchToCollada–> Collada --Assimp–> Obj 2.…

(5)4T刷题-逻辑代数基础

&#xff08;1&#xff09;逻辑函数的常用表示方法有&#xff1a;真值表、逻辑图、卡诺图、函数表达式 逻辑函数的表达方法中具有唯一性的是&#xff1a;真值表和卡诺图 &#xff08;2&#xff09;异或运算&#xff08;题干意思不明确&#xff0c;应该是按位异或&#xff09; …

Linux(网络基础和网络标准OSI七层结构)

后面也会持续更新&#xff0c;学到新东西会在其中补充。 建议按顺序食用&#xff0c;欢迎批评或者交流&#xff01; 缺什么东西欢迎评论&#xff01;我都会及时修改的&#xff01; 在这里真的很感谢这位老师的教学视频让迷茫的我找到了很好的学习视频 王晓春老师的个人空间…

向达梦告警日志说声hello

为了调试和跟踪一些业务功能&#xff0c;通常会创建一个日志表&#xff0c;写入每个关键步骤的信息。也可以向达梦数据库的告警日志输出信息&#xff0c;然后通过查看告警日志即可。 在达梦的告警日志中输出一个信息可以这样 SQL> DBMS_SYSTEM.KSDWRT(2,hi dm);

详解 ES6 Reflect

一. 概念 Reflect 是 ES6 中新增的一个内置对象&#xff0c;它提供了一组静态方法&#xff0c;用于操作对象。这些方法与 Object 上的方法具有相同的功能。在这些方法中会调用对应 Object 上的方法&#xff0c;并且返回对应结果。Reflect 的出现主要是为了将一些 Object 对象上…