MVVM初步理解

最新推荐文章于 2022-09-30 11:09:07 发布

夹心爱吃果冻

最新推荐文章于 2022-09-30 11:09:07 发布

阅读量165

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43168302/article/details/118583447

版权

本文详细介绍了MVVM架构，包括模型（Model）负责数据存储，视图（View）用于展示模板代码，以及视图模型（ViewModel）作为Vue实例对象连接模型与视图。通过示例展示了Vue中v-bind和v-model的数据绑定机制，阐述了Vue实例如何将$data中的数据与视图进行同步。

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

1.mvvm的理解：
    1.M:模型（model):对应data中的数据
            data:{
            msg:"哒哒哒"
             }
    2.V:视图（view）:模版代码
            <div id="root">
             单向数据绑定（v-bind）:<input type="text" :value="msg"></br>
             双向数据绑定（v-model）:<input type="text" v-model="msg">
            </div>
    3.VM:视图模型（viewmodel):vue实例对象
             new Vue({
             el:"#root",
             data:{
             msg:"哒哒哒"
                      }
              })

<div id="root">
    单向数据绑定（v-bind）:<input type="text" :value="msg"></br>
    双向数据绑定（v-model）:<input type="text" v-model="msg">
</div>
<script src="../vue.js">
</script>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            msg:"哒哒哒"
        }
    })

vue实例里面的都带$,data里面的都被悄悄拿过来放进里面了