[vue] el与data的两种写法

data与el的2种写法

1.el有2种写法

(1).new Vue时候配置el属性。

new Vue({
    el:'#root', //第一种写法
    data:{
      name:'尚硅谷'
    }
  })

(2).先创建Vue实例，随后再通过​​vm.$mount('#root')​​指定el的值。

const v = new Vue({
  data:{
    name:'尚硅谷'
  }
})

console.log(v)
v.$mount('#root') //第二种写法

2.data有2种写法

(1).对象式

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

})

(2).函数式

new Vue({
    el:'#root',

    //data的第二种写法：函数式
    data(){
      console.log('@@@',this) //此处的this是Vue实例对象
      return{
        name:'尚硅谷'
      }
    }
  })

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

3.一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。