Vue el与data的两种写法

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

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>