render函数

作者: 北街九条狗 | 来源:发表于2019-07-03 16:19 被阅读0次
    使用render函数可以渲染组件
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
        </div>
        <script src="./js/vue.js"></script>
        <script src="./js/vue-router.js"></script>
        <script>
            var log={
                template:`<h1>注册</h1>`
            }
            var vm = new Vue({
                el: "#app",
                data: {},
                components:{
                    log,
                },
                //render函数渲染的组件会完全覆盖app中的内容
                render : h => h(log),
            })
        </script>
    </body>
    
    </html>
    
    区别 : 使用render渲染的组件会完全替换el挂载元素中的内容,而第一种方法不会(看不见p标签中的333,因为被替换了)

    相关文章

      网友评论

        本文标题:render函数

        本文链接:https://www.haomeiwen.com/subject/ynhchctx.html