Vue基础 —— 基础结构

Vue基础结构

• el方式渲染

<div id="app">
    <p>公司名称：{{ company.name }}</p>
    <p>公司地址：{{ company.address }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //vue内部会把data中的数据填入el所指向的模板中，并把模板渲染到浏览器。
    new Vue({
        el：'#app',
        data: {
            company：{
                name：'海创',
                address：'中关村'
            }
        }
    })
</script>

• render方式渲染

<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 这段代码和上个代码效果一样，不过使用了rander和$mount方法，使用vue-cli创建的结构和这段代码是一样的。
    new Vue({
        data: {
            company: {
                name: '拉勾',
                address: '中关村'
            }
        },
        // render函数接收一个参数：h函数
        // h函数的作用是创建虚拟DOM，render方法把创建的虚拟DOM返回
        render(h) {
            return h('div', [
                h('p', '公司名称:' +  this.company.name),
                h('p', '公司地址:' +  this.company.address)
            ])
        )
    // $mount是把虚拟DOM转换成真实DOM渲染到浏览器
    }).$mount('#app')
</script>

使用el选项和使用render选项在运行的时候有什么区别？接下来的课程中会讲到。