06el和data的两种写法

el和data的两种写法

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

<script>
    // el的第一种写法：写在Vue实例对象中
    new Vue({
        el:'#root',
        data: {
            name:'alex'
        }
    })


    // el的第二种写法：通过实例的缔造者的原型对象上的方法，获取容器  （Vue实例对象 --->(缔造者Vue)--->原型对象（$mount方法））
    const V = new Vue({
        // el:'#root',
        data: {
            name:'alex'
        }
    })
    V.$mount('#root')

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

    
    // data的第二种写法：函数式
    new Vue({
        el:'#root',
        data(){
            return {
                name:'alex'
            }
        }
        // data:function(){
        //     console.log('@@@',this)  // 此处的this是Vue，当是用的数箭头函数（()=>{}时，this本事没有往外找，window）
        //     return {
        //         name:'alex'
        //     }
        // }
    })
</script>