526互联

[Vue]el和data的两种写法

发布时间 2023-10-19 15:33:27作者: 夕苜19

1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

//------------- el 的两种写法 ------------- 
const vm = new Vue({
    el: '#root',    // 第一种写法
    data: {
        name: '模板'
    }
})

//-----------------------------------------
const vm = new Vue({
    data: {
        name: '模板'
    }
})
vm.$mount('#root')  // 第二种写法，挂载到容器#root中

 

2.data有2种写法
(1).对象式
(2).函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

// ------------- data 的两种写法 ------------- 
const vm = new Vue({
    el: '#root',
    // 第一种写法，对象式
    data: {
        name: '模板'
    }
})

// ------------------------------------------- 
const vm = new Vue({
    // 第二种写法，函数式，写组件的时候用到
    // 也可以直接写成 data(){}
    data: function () {
        // 此处如果是普通函数，this指向Vue实例对象；如果是箭头函数，this指向window对象。
        console.log('this: ', this)
        return {
            name: '模板'
        }
    }
})

 

3.一个重要的原则:
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。