Vue学习_02 el与data的两种写法

    // const v= new Vue({
    //    // el:'#root',//el第一种写法
    //     data:{
    //         name:'绘角'
    //     }
    // })
    // console.log(v)
    // v.$mount('#root')//el第二种写法

    //data的两种写法
    new Vue({
        el:'#root',
        //data的第一种写法：对象式
        // data:{
        //     name:'绘角'
        // }

        //data的第二种写法：函数式
        data(){
            console.log('this',this)//此处的this是Vue实例对象
            return{
                name:'绘角'
            }
        }
    })
</script>

总结：

data与el的2种写法：

1.el有2种写法

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

2.data有2种写法

对象式
函数式

如何选择，用组件的时候，data必须使用函数式，否则会报错。一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。