MVVM 模型 标准定义

本部分引用 维基百科(https://zh.wikipedia.org/wiki/MVVM)

MVVM（Model–View–ViewModel）是一种软件架构模式。

010_理解MVVM - 图1


MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。
MVVM是马丁·福勒的PM（Presentation Model）设计模式的变体。MVVM以相同的方式抽象出视图的状态和行为，但PM以不依赖于特定用户界面平台的方式抽象出视图（建立了视图模型）。
MVVM和PM都来自MVC模式。
MVVM由微软架构师Ken Cooper和Ted Peters开发，通过利用WPF（微软.NET图形系统）和Silverlight（WPF的互联网应用派生品）的特性来简化用户界面的事件驱动程序设计。微软的WPF和Silverlight架构师之一John Gossman于2005年在他的博客上发表了MVVM。
MVVM也被称为model-view-binder，特别是在不涉及.NET平台的实现中。ZK（Java写的一个Web应用框架）和KnockoutJS（一个JavaScript库）使用model-view-binder。

Vue 借鉴 MVVM 设计的模型

因为 Vue 没有严格按照 MVVM 模型设计，那么 Vue 设计的模型是什么样呢?
下面看看Vue如何对应的:

缩写 单词 对应Vue中的关系
M 模型(Model) 对应 data 中的数据
V 视图(View) 模板
VM 视图模型(ViewModel) Vue 实例对象

010_理解MVVM - 图2

用下图具体对应一下：

010_理解MVVM - 图3

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>理解MVVM</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            MVVM模型
                1. M：模型(Model) ：data中的数据
                2. V：视图(View) ：模板代码
                3. VM：视图模型(ViewModel)：Vue实例
            观察发现：
                1.data中 所有的属性，最后都出现在了 vm 身上。
                2.vm身上 所有的属性 及 Vue原型上所有属性，在 Vue模板 中都可以直接使用(例如：可以直接使用 插值语法{{***}} 输出)。
        -->
        <!-- 准备好一个容器-->
        <div id="root">
            <h1>学校名称：{{name}}</h1>
            <h1>学校地址：{{address}}</h1>

            <!-- <h1>测试一下1：{{1+1}}</h1>
            <h1>测试一下2：{{$options}}</h1>
            <h1>测试一下3：{{$emit}}</h1>
            <h1>测试一下4：{{_c}}</h1> -->
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        //因为我们在 Vue中使用 VM 对应 MVVM模型中的 Vue实例对象，所以以后在接收 Vue实例对象时,请使用变量 vm :
        const vm = new Vue({
            el:'#root',
            data:{
                name:'尚硅谷',
                address:'北京',
            }
        })
        console.log(vm)    //通过 浏览器控制台Console输出 vm变量
    </script>
</html>

注：
address 英[əˈdres] 美[əˈdres]
n. 住址;(互联网等的)地址;演讲;演说;称呼;通信处;
vt. 演讲;演说;称呼（某人）;致函;设法解决;向…说话;写(收信人)姓名地址;