vue中的MVVM模型

MVVM是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

在Vue中

Model就是数据模型（亦指数据层）可以是我们固定死的数据，也可以是来自服务器请求来的数据。

View就是页面DOM（亦指视图层）主要就是向用户展示信息的。

 ViewModel 在vue中就是指vue实例（亦指数据模型层）充当View与Model之间通信的桥梁

1.M:模型(Model) :对应data中的数据

2.V:视图(View):模板（页面结构）

3.VM:视图模型(ViewModel) : Vue实例对象

MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

 

下面用代码展示一下

 DOM Listeners （DOM侦听器）

在当用户在view上面写的数据会通过viewModel传入data里面

    <div id="app">
        <!--view层-->
        <input type="text" v-model="mytext">
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({ //  ViewModel层
            el: '#app',
            data: { //model层
               
                mytext: ''



            }
        })
        console.log(vm);
    </script>

当view中表单什么都没有输入时，ViewModel中的mytext为空，Model(data)中的mytext为空

 

当view中表单输入 "123" 时 ,ViewModel中的mytext为"123"，Model(data)中的mytext也为"123"

 

 

 Data Bindings 数据绑定

当我修改data里面的数据时，,ViewModel中的数据会分数改变，view上的数据也会发生改变

 

 

 

观察发现:

1.data中所有的属性,最后都出现在了vm身上。

2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。