如何理解vue中的MVVM模型 ?

一 . MVVM模型的含义

模式说明：MVVM = Model + View + ViewModel

MVVM，一种软件架构模式，决定了写代码的思想和层次

• M：model模型层，负责处理业务逻辑以及和服务器端进行交互 (data里定义)
• V：view视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面（template里定义html页面结构)
• VM：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁(vue组件实例this)

二 . MVVM模型的特点

MVVM通过数据双向绑定让数据自动地双向同步  不再需要操作DOM,可以简单地了解为数据驱动视图,极大地程度上解决DOM操作

三 . 示例如下

    <template>
      <div>
       <h2>姓名: {{name}}</h2>
       <h2>性别: {{sex}}</h2>
       <h2>年龄: {{age}}</h2>
      </div>
    </template>

    <script>
    export default {
      data () {
        return {
          name: '张三',
          sex: '男',
          age: 18
      }
     },
      methods: {
       //vue配置项
     }
    }
    </script>

总结

1. data上的所有属性,都出现在VM上面
2. VM上的属性,都可以在vue模板里面使用