【Vue】学习笔记--Vue 虚拟DOM demo分享

最新推荐文章于 2024-06-28 17:29:09 发布

zZhiqg^

最新推荐文章于 2024-06-28 17:29:09 发布

阅读量202

点赞数

分类专栏： Vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qiaofuwufu/article/details/127701482

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

🚀🚀

🌞:一个虚拟DOM的demo分享
🔫:zZhiqg的主页
🍉:嘿也许你和我一样~
只是学习过程中的笔记啦，还望指正错误

文章目录

前景提要

🐶狗哥前段时间给我分享了一个demo
🥙至此，我对虚拟DOM的疑问告一段落
下面把demo分享给大家

demo展示

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>一张草稿纸</title>
</head>
<body>
    // 创建一个root作为一个根节点
    <div id="root"></div>
    <script type="text/javascript">
        // 这个vnode就是一个虚拟的DOM,实际上就是一个javascript对象
        const vnode = {
            tag: "div",
            children: [{
                tag: "span",
                children: "nihao"
            }, {
                tag: "span",
                children: "zzq"
            }]
        }

        // vnode 添加到页面
        function Render(obj, root) {
            // DOM操作,新建元素
            const el = document.createElement(obj.tag)
            if (typeof obj.children == "string") {
                const text = document.createTextNode(obj.children)
                el.appendChild(text)
            } else if (obj.children) {
                obj.children.forEach(item => {
                    // 递归的调用 妙极了！！
                    Render(item, el)
                })
            }
            // 新增DOM到root节点上
            root.appendChild(el)
        }

        // 获取到root节点
        const root = document.getElementById('root')
        // render开始
        Render(vnode, root)
    </script>
</body>
<style>

</style>
</html>