render 函数模板（八）

render 函数去渲染模板最重要部分、创建虚拟DOM核心部分；

<script src="vue.js"></script>

.bg{
    background:red;
}

<!-- DOM模板 view 视图层 -->
<div id="demo"></div>

// Vue 实例
var vm = new Vue({
    el:'#demo',
    render(createElement){    //ES6简写
        return createElement(
            'ul',//ul是父级，创建一个父级挂一些属性和方法；
                {
                    class:{bg:true},
                    style:{fontSize:'20px'}
                },
                [    //创建更多的子集通过中括号[]的形式，
                    //每次创建一个li节点都要调用一次该createElement()方法；
                    createElement('li',11),
                    createElement('li',22),
                    createElement('li',33)
                ]
        )
    }
})

分析：createElement 是内置参数，名称是可以修改的，开始创建虚拟DOM；

createElement( ) 是一个方法，专门生成DOM结构的。

注意：中括号 [ ] ，是用来添加子集的。大括号 { } 对象 ，为父元素添加类名class 和 样式style；

结果后台渲染为：会替换原始的div标签。如下：

<ul class="bg" style="font-size:20px;">
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>