Vue学习笔记（五）el与data,MVVM

最新推荐文章于 2024-08-27 09:28:13 发布

Vincy.Zhang

最新推荐文章于 2024-08-27 09:28:13 发布

阅读量104

点赞数

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

本文链接：https://blog.csdn.net/weixin_43041350/article/details/127888386

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了Vue中el和data的两种不同写法，包括在new Vue时配置el属性和使用v.$mount指定挂载点，以及data的数据对象可以采用对象式和函数式。在组件学习中，data必须使用函数式。同时，文章讲解了MVVM模型，解释了Model（数据）、View（模板）和ViewModel（Vue实例）之间的关系，并展示了简单的MVVM实例。

摘要由CSDN通过智能技术生成

Vue学习笔记（五）el与data,MVVM

el与data的不同写法

<body>
    <!-- 
        el挂载器的两种写法：
            1.new Vue时候配置el属性。
            2.先创建Vue实例，随后通过v.$mount(‘#root’)指定el的值。
     -->
     <!-- 
        data数据对象的两种写法：
        1.对象式
        2.函数式
        
        如何选择：目前哪一种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
</body>
<script>
    var v = new Vue({
        // 容器挂载第一种写法
        // el:'#root',
        data:{
            name:'尚硅谷'
        }
    })
    // 输出Vue实例
    console.log(v); 

    // 1秒后执行
    setTimeout(()=>{
        // 容器挂载第二种写法
        v.$mount('#root');
    },1000)
    
 // data的第二种写法：函数式
            data(){
                console.log('@@@',this) //此处的this是Vue实例对象
                return {
                    name:'尚硅谷'
                }
            }
    })

</script>

MVVM
在这里插入图片描述

<body>
    <!-- 
        MVVM模型：
            M：模型（Model）：对应data中的数据；
            V：视图（View）：模板；
            VM：视图模型（ViewModel）：Vue实例对象；
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
            address:'北京'
        }
    })
</script>