Vue—el与data的两种写法

糖醋小排顾。

于 2023-01-20 21:20:17 发布

阅读量106

点赞数 2

分类专栏： Vue学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Guuiabc/article/details/128743862

版权

Vue学习专栏收录该内容

63 篇文章

订阅专栏

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>