(资料图)
理解MVVM模型
我们知道每一个 Vue 应用都是从创建一个新的实例开始的，根据 Vue2 的官方文档我们可以得知 Vue 的设计是得到了 MVVM 模型 的启发，所以就有了在我们创建 Vue 实例时，文档中经常使用vm这个变量名来表示 Vue 实例。（学习视频分享：vue视频教程）
什么是 MVVM 模型
我们知道了 Vue 借鉴了 MVVM模型的原理，但是我们只知道借鉴这件事，却不知道什么是MVVM模型，这里简单说明一下什么是 MVVM 模型。
MVVM (Model-View-ViewModel) 就是将其中的 View 的状态和行为抽象化，MVVM 模式和 MVC 模式一样，主要目的是分离视图和模型，MVVM 旨在利用 WPF 中的数据绑定函数，通过从视图层中几乎删除所以 GUI 代码，更好地促进视图层开发与模式其余部分的分离，不需要用户体验开发人员编写 GUI 代码，他们可以使用框架标记语言，并创建到应用程序开发人员编写和维护的视图模型的数据绑定。如下图所示：
MVVM模型主要是为了分离视图(View)和模型(Model)，其优点为：低耦合、可重用性、独立开发以及可测试。 视图和模型分离的特点给了 Vue 很大的启发。
MVVM的组成部分
在 MVVM 模式中的组成部分分为以下四种：
Vue中的实现
所以说得到MVVM模型启发的Vue，其核心就是实现了DOM监听与事件绑定，如下一个经典图例：
MVVM模型在 Vue 中的应用
举一个简单的 Vue 案例，来说明 MVVM 的主要三种组成部分在 Vue 中分别代表什么，如下：
姓名：{{name}}
国籍：{{address}}
<script> Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示 const vm = new Vue({ data:{ name:"张三", address:"中国" } }) vm.$mount("#id") console.log(vm); </script>
登录后复制当然 MVVM 模型的思想不仅仅只应用在 Vue 上面，其他主流的前端框架也都能看到 MVVM 模型的影子。希望看完这篇文章，能够帮助你对 MVVM 模型有了更深一步的了解。
【相关视频教程推荐：vuejs入门教程、web前端入门】
以上就是聊聊MVVM模型在Vue中怎么应用的详细内容，更多请关注php中文网其它相关文章！
