Vue 2.x – el和data的两种写法

el

第一种写法：直接绑定容器

    <script>
        new Vue({
            el: '#root',
            data: {
                name: "小白"
            }
        })
    </script>

第二种写法：用$mount() 来挂载

    <script>
        const v = new Vue({
            data: {
                name: "小白"
            }
        })

        setTimeout(() => {
            v.$mount('#root')
        }, 1000)
    </script>

data

第一种写法：对象式

    <script>
        new Vue({
            el: '#root',
            data: {
                name: "小白"
            }
        })
    </script>

第二种写法：函数式

    <script>
        new Vue({
            el: '#root',
            data:function(){
                return{
                    name:"小白"
                }
            }
        })
    </script>

或：

    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    name: "小白"
                }
            }
        })
    </script>

注意

此时的data函数必须是普通函数，此时的函数中this为Vue，如果使用箭头函数，那么this就成为了window，程序出错