（六）Vue之MVVC

Vue学习目录

上一篇：（五）Vue之data与el的两种写法

下一篇：（六）Vue之数据代理

MVVC

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。
MVC参考：MVC架构模式
MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

Vue中的MVVC

1. M：模型(Model) ：data中的数据
2. V：视图(View) ：模板代码
3. VM：视图模型(ViewModel)：Vue实例

View层的数据（表单、输入类元素等）通过ViewModel层的DOM监听器，传输到Model层。
Model层的数据通过ViewModel层的数据绑定器，展示到View层。

Vue代码中的MVVM

	<div id="root">
        <!--View-->
       <h1>学校名称：{{name}}</h1>
       <h1>学校地址：{{addr}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示。
        new Vue({//ViewModel
            el:'#root',
            data:{//Model
                name:'一中',
                addr:'广州'
            }
        });
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

我们不难发现：

• 1.data中所有的属性，最后都出现在了vm身上。
• 2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。