04_el与data的两种写法

data与el的2种写法:

1. el有2种写法

    (1).new Vue时候配置el属性。
   
    (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
   

2. data有2种写法:

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

3. 一个重要的原则：

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

主要代码：

<div id="root">
    <h1>你好，{{name}}</h1>
</div>

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

//el的两种写法
/* const v = new Vue({
        //el:'#root', //第一种写法
        data:{
                name:'小姜学习Vue'
        }
})
console.log(v)
v.$mount('#root') //第二种写法 */

//data的两种写法
new Vue({
        el:'#root',
        //data的第一种写法：对象式
        /* data:{
                name:'小姜学习Vue'
        } */

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