Vue结合MVVM模型的实现方法

什么是MVVM模型？

MVVM (Model-View-ViewModel) 就是将其中的 View 的状态和行为抽象化，MVVM 模式和 MVC 模式一样，主要目的是分离视图和模型，MVVM 旨在利用 WPF 中的数据绑定函数，通过从视图层中几乎删除所以 GUI 代码，更好地促进视图层开发与模式其余部分的分离，不需要用户体验开发人员编写 GUI 代码，他们可以使用框架标记语言，并创建到应用程序开发人员编写和维护的视图模型的数据绑定。

Vue结合MVVM模型的实现方法，下面web建站小编带大家了解一下，附代码介绍。

代码如下：

//Vue
<div id="id">
  <h1>姓名：{{name}}</h1>
  <h1>国籍：{{address}}</h1>
</div>
<script>
  Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
  //Model
  const vm = new Vue({
   data:{
      name:'张三',
      address:'中国'
    }
  })
  ViewModel
  vm.$mount('#id')
  console.log(vm);
</script>

Model：模型层，data里面的数据，表示JS的对象；

View：视图层，HTML内容部分，表示HTML中能操作的DOM元素；

ViewModel：充当连接视图和数据的中间人，即就是定义了 Observer 观察者身份，即桥梁。