Vue中el与data的两种写法

el的两种写法

1. 在new Vue时在参数里直接写el。

    new Vue({
        el:'#app',
        data:{
            message:'你好，Vue'
        }
    })

2. 使用挂载的方式。先创建实例，再指定el的值。

    const v = new Vue({
        // el:'#app',
        data:{
            message:'你好，Vue'
        }
    })
    v.$mount('#app')

使用这种方式还可以让该构造函数延迟1s钟执行。

    const v = new Vue({
        // el:'#app',
        data:{
            message:'你好，Vue'
        }
    })
    setTimeout(() => {
        v.$mount('#app')
    }, 1000);

data的两种写法

1. 第一种写法如上面代码所示，即对象式。
2. 第二种写法名为函数式。顾名思义就是将data写为一个函数，且函数必须要有return语句将data值进行返回。

    const v = new Vue({
        // el:'#app',
        // data:{
        //     message:'你好，Vue'
        // }
        data:function(){
            return{
                message:'你好，Vue'
            }
        }
        //下面是data函数简写形式
        /*data(){
            return {
                message:'你好，Vue'
            }
        }
        */
    })
    setTimeout(() => {
        v.$mount('#app')
    }, 1000);

Tips

1. 当涉及组件时，data的写法必须是函数式，否则会报错。
2. 由Vue管理的函数（例如函数式的data的函数），里面的参数一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。