Vue—el与data的两种写法

原创于 2023-01-20 21:20:17 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue学习专栏收录该内容

63 篇文章

订阅专栏

文章介绍了在Vue.js中，el的两种绑定方法，即在创建Vue实例时配置和通过$mount方法指定。同时，讲解了data的两种声明方式，对象式和函数式，强调在组件中data必须用函数式。另外，文章提醒读者，使用箭头函数会导致this不再指向Vue实例。

data与el的2种号法

1.el有2种写法

(1).newvue时候配置el属性。

(2).先创建vue实例。随后再通过vm.$mount（'#root')指定el的值。

2.data有2种写法

（1）.对象式

（2）.函数式

如何选择：目前哪种写法都可以。以后学习到组件时，data必须使用函数式。否期会报错。

3.一个重要的原则：

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

<body>
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
</body>
<script>
    //el的两种写法
    const v=new Vue({
       //el:'#root',
       //data的两种写法
       //1.对象方式
        /*data:{
            name:'Gui'
        }*/
        //2.函数方式
        data/*:function*/(){
            return{
                name:'Gui'
            }
        }
    })
    //设置时间
    setTimeout(()=>{
        v.$mount('#root')//指定指向的目标
    },1000);
    
</script>