M:Model数据模型
V:View视图
VM:ViewModel视图模型
Vue也是借鉴了MVVM的思想
在Vue中,M就是data,V指挂载点,而Vue实例本身就是一个VM
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识MVVM分层思想</title><script src="../js/vue2/vue.js"></script>
</head><body><!--1. MVVM 是什么？M: Model （模型/数据）V: View （视图）VM: ViewModel （视图模型） - VM 是 MVVM 中的核心部分。（它起到一个非常重要的作用。）MVVM 是目前前端开发流行的并非常常见的开发架构模式。目前前端的大部分主流框架都实现了这个 MVVM 模型。例如 Vue、React 等。2. Vue 是基于 MVVM 吗？没有完全完全遵循 MVVM 模型，但是 Vue 的设计思想中受到了它的启发。Vue框架本身也是存在的 MVVM 思想的。3. MVVM 模型中为什么要将 Model 和 View 进行分离？为什么要分离？假如你使用传统的 JavaScript 代码写项目：在传统的项目中，我们经常使用 document.getElementById/view/等原生的操作 DOM 元素的 JS 代码。如果数据发生任意的改动，接下来我们需要编写大量操作 DOM 的代码。将 Model 和 View 分离之后，出现了一个 VM 层。这个 VM 层的责任活给做了。也就是说，当 Model 发生变化之后，VM 自动去更新 View。VM 自动去更新 Model。我们再也不需要编写操作 DOM 的 JS 代码了，开发效率提高了很多。--><!-- 容器 --><!-- View --><div id="app">消息:<input type="text" v-model="msg"></div><script>//Vue实例就是 VM ViewModelnew Vue({el: '#app',//这个就是Modeldata: {msg: 'Hello Vue'}})</script>
</body></html>
