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,程序出错

 

转载请注明出处,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>