一、todolist列表

• jQuery实现方式
  html

    <div id="nodeData">暂时没有数据</div>
    <ul class="todo_list_box" id="todoListBox">
    </ul>

js

    var todoListBox = $("#todoListBox")
    var nodeData = $("#nodeData")
    function render () {
        var frag = document.createDocumentFragment()
        var renderHtml = ""
        for (var i = 0; i < 100; i++) {
            var li = document.createElement('li')
            li.innerHTML = "第"+i+"个列表"
            frag.appendChild(li)
        }
        todoListBox.html(frag)
    }
    setTimeout(function () {
        nodeData.hide()
        render()
    }, 500)

• Vue实现方式
  html

    <div id="app">
        <div id="nodeData" v-if="num === 0">暂时没有数据</div>
        <ul class="todo_list_box" id="todoListBox">
            <li v-key="item" v-for="item in num">{{item}}</li>
        </ul>
    </div>

js

    new Vue({
        el: "#app",
        data () {
            return {
                num: 0
            }
        },
        mounted () {
            var _this = this
            setTimeout(function () {
                _this.render()
            }, 500)
        },
        methods: {
            render () {
                this.num = 1000
            }
        }
    })

比起上面的jQuery手动向dom中插入元素，使用Vue的好处依然是无需操作dom，通过Vue这个桥梁便可以动态改变dom结构

上面代码中展示了三种Vue模板渲染的语法，分别是 v-if 、v-for、{{}}，详细的Vue渲染语法请参考
Vue模板语法