Vue基础 —— 基础结构

1/9/2022 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

更新时间: 2022-01-10 09:52