29_render

作者: CHENPEIHUANG | 来源:发表于2018-02-12 19:58 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <home></home>
        </div>
        <script src="js/vue.js"></script>
        <script>
            const Home = {
//              template:"<div class='red'><h1 class='blue'>标题</h1><p>11111</p></div>"
                render:function(createElement){
                    //参数：创建虚拟元素的函数
                    /*
                     * 创建元素的函数的使用
                     * 第一个参数：待创建的元素名称
                     * 第二个参数：定义待创建元素的属性
                     * 第三个参数：设置元素内的子节点
                     */
                    return createElement('div',{
                        'class':{
                            red:true
                        }
                    },[
                        createElement('h1',{
                            'class':{
                                blue:true
                            }
                        },'标题'),
                        createElement('p','11111')
                    ])
                }
            };
            
            var vm = new Vue({
                el:"#app",
                components:{
                    'home':Home
                }
            })
        </script>
    </body>
</html>