Vue:el与data的两种写法

data与el的2种写法

1.el的两种写法

(1)new Vue时候配置el属性
(2)先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值【可以对其进行一些操作】

2.data的两种写法

(1)对象式
(2)函数式
如何选择：学到组件时，data必须使用函数式，否则会报错

3.一个重要原则：

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

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

        Vue.config.productionTip = false;
        //el的两种写法
        const vm = new Vue({
            //el:'#root',//第一种写法

            //data的第一种写法：对象式
            // data: { 
            //     name: 'YY'
            // }

            //对象的第二种写法：函数式
            data() {
                // console.log(this); //this指向Vue实例对象
                return {
                    name: 'yy'
                }
            }
        })
        console.log(v);
        // v.$mount('#root'); //第二种写法
        setTimeout(() => {
            v.$mount('#root');
        }, 1000);