要想通过VUE来写HTML结构，一般官方推荐都是tempplate属性，使用起来简单方便；具体code如下例一：

例一：使用template进行渲染ul列表

var vm = new Vue({
    el:"#demo1",
    template:`
        <ul class = "bg" style = "fontSize:20px" abc = "yyy">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    `
});

然而在一些实用应用场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。具体示例code如下例二：

例二：使用render函数进行渲染ul列表

var vm = new Vue({
    el:"#demo",
    render(createElement){
        var obj = createElement(
            "ul",
            {
                class: {
                    bg:true
                },
                style:{
                    fontSize:"50px"
                },
                attrs:{
                    abc:"yyy"
                },          
            },
            [
                createElement("li",1),
                createElement("li",2),
                createElement("li",3)
            ]
        );
        console.log( obj );
        return obj;
    }
});

例二和例一是VUE中实现虚拟DOM的两种方式，其最终浏览器的呈现效果是一致的；其在底层实现中，Vue 将模板先通过render函数编译成虚拟 DOM 渲染数据。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，从而将 DOM 操作次数减到最少。

接下来我们先了解DOM树和虚拟DOM

HTML 的真实DOM 节点树如下图所示

vue 的虚拟DOM 节点树构建过程如下图所示

通过该过程可以了解到：render函数使用了createElement来返回一个虚拟DOM,从而对真实 DOM 进行渲染。然后还可以通过watcher监听“虚拟DOM”发生的变化并保持追踪；它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点，通过这个过程，Vue 会自动保持页面的更新，开发者就可以高效的更新所有DOM节点，

vue 的虚拟DOM生成DOM的数据示意图

render函数简要介绍

接下来你需要熟悉的是如何在 createElement 函数中生成模板。这里是 createElement 接受的参数：

createElement(
    // 1.传入你想要生成最外层的根节点
    // {String | Object | Function}
    // 可以是一个 HTML 标签字符串，组件选项对象，或者
    // 解析上述任何一种的一个 async 异步函数，必要参数。
    'ul',

    // 2.一个包含DOM节点相关属性的数据对象
    // {Object}
    // 设置 生成DOM 中的属性。一般操作根节点，可选参数。
    {
        class: { 
            bg:true
        },
        style:{
            fontSize:"50px"
        },
        attrs:{
            abc:"yyy"
        },
        domProps:{
            /*innerHTML:"<li>我是里面的html结构</li>" */
        }   
    },

    // 3.生成子节点
    // {String | Array}
    // 子节点由 `createElement()` 构建而成，
    // 也可以使用字符串来生成“文本节点”。可选参数。
    [
        createElement("li",1),
        createElement("li",2),
        createElement("li",3)
    ]
)