03_el与data的两种写法

一、el的两种写法

　　1. new Vue时候，配置el属性

new Vue({
      el: '#root', 
      data: {
          name: 'jack'
      }
})

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

const vm = new Vue({
     data: {
        name: '尚硅谷'
    }
})  
vm.$mount('#root')

二、data的两种写法

　　1. 对象式

new Vue({
      el: '#root', 
      data: {
          name: 'jack'
      }
})

　　2. 函数式

new Vue({
      el: '#root', 
      data(){  // data不能写箭头函数(箭头函数没有自己的this,只能找到外部的this---Window)
            console.log(this); // 此处的this是Vue实例对象
            return {
                name: 'jack'
            }
        }
})

　　3. 如何选择

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

　　4. 注意

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