Vue el与data的两种写法

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=9

data 与 el 的2种写法

1. el 有2种写法
   1. new Vue 时配置 el 属性
   2. 先创建 Vue 实例，随后再通过 vm.$mount('#root') 指定 el 的值
2. data有2中写法（如何选择：目前哪种写法都可以，使用组件时，data 必须使用函数式，否则会报错。）
   1. 对象式
   2. 函数式
3. 一个重要的原则：由 Vue 管理的函数，一定不要写箭头函数（()=>{}），一旦写了箭头函数，this 就不再是 Vue 实例了。

el 的第一种写法

第一种：new 的时候就传入 el 对应的容器

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'jay'
        }
    })
</script>

el 的第二种写法

<script type="text/javascript">
    const v = new Vue({
        data:{
            name:'jay'
        }
    })
    console.log(v);
    v.$mount('#root')
</script>

data 的第一种写法

对象式

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
          name:'jay'
        }
    })
</script>

data 的第二种写法

函数式

<script type="text/javascript">
    new Vue({
        el:'#root',
        //data 的第二种写法：函数式
        data: function (){
            console.log('@@@', this); //此处的 this 是 Vue 实例对象
            return {
                name:'jay'
            }
        }
    })
</script>

函数式写法的简写：

<script type="text/javascript">
    new Vue({
        el:'#root',
        //data 的第二种写法：函数式
        data(){
            console.log('@@@', this); //此处的 this 是 Vue 实例对象
            return {
                name:'jay'
            }
        }
    })
</script>