跳到主要内容

render

2023年05月29日
柏拉文
越努力，越幸运

一、认识​

render 可以编程式的创建虚拟 DOM 树对应的真实的 DOM 树, 到指定的位置。

二、语法​

render(vnode,container);

  • vnode: 虚拟节点树或者叫做虚拟 DOM 树

  • container: 承载的容器，真实节点渲染的位置

三、场景​

3.1 渲染 VNode​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="importmap">
        {
            "imports":{
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }
        }
    </script>
</head>
<body>
    <div id="app"></div>

    <script type="module">
        import { h, render } from "vue";

        const container = document.querySelector("#app");
        const VNode = h('div', { class: 'div-container' }, "哈哈");
        render(VNode,container);
    </script>   
</body>
</html>