zoukankan      html  css  js  c++  java
  • 普通组件定义渲染和render渲染组件的区别(三)

    普通方式定义组件和效果:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="lib/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <p>111111111</p>
                <login></login>
            </div>
            
            
            <script>
                
    //            var login = {
    //                template:"<h1>这是登录组件</h1>"
    //            }
                
                var vm = new Vue({
                    el:"#app",
                    data:{},
                    methods:{},
    //                render:function(createEle){
    //                    //把制定的组件模板渲染成html结构
    //                    //此参数为形参,名字自定义,这个形参是一个方法,返回的是一个html
    //                    return createEle(login);
    //                },
                    components:{
                        login:{
                            template:"<h1>这是登录组件</h1>"
                        }
                    }
                });
                
            </script>
            
        </body>
    </html>

    效果:

    render渲染组件方式和效果:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="lib/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <p>111111111</p>
                <!--<login></login>-->
            </div>
            
            
            <script>
                
                var login = {
                    template:"<h1>这是登录组件</h1>"
                }
                
                var vm = new Vue({
                    el:"#app",
                    data:{},
                    methods:{},
                    render:function(createEle){
                        //把制定的组件模板渲染成html结构
                        //此参数为形参,名字自定义,这个形参是一个方法,返回的是一个html
                        return createEle(login);
                    }
    //                components:{
    //                    login:{
    //                        template:"<h1>这是登录组件</h1>"
    //                    }
    //                }
                });
                
            </script>
            
        </body>
    </html>

    效果:

  • 相关阅读:
    一条SQL的执行流程
    LinkedList源码解析
    MinorGC前检查
    AbstractList源码分析
    JVM常用命令
    CountDownLatch源码解析
    ReentrantLock源码解析
    HTTPS简单介绍
    工厂方法模式
    观察者模式
  • 原文地址:https://www.cnblogs.com/lubolin/p/10937436.html
Copyright © 2011-2022 走看看