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 ViewModel
new Vue({
el: '#app',
//这个就是Model
data: {
msg: 'Hello Vue'
}
})
</script>
</body>
</html>
