- MVC是后台的设计思想，将前端作为 View 层考虑进去了
- MVVM是前端的框架，针对的是 MVC 中的 V 进行的分层
Vue 的 MVVM 示例
<!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>Document</title>
<!-- 导入 vue 包-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue 实例所控制的元素区域，就是 MVVM 中的 V 层 -->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// <!-- 创建 vue 实例 -->
// <!-- 当导入包后，在浏览器内存中多了一个 vue 构造函数 -->
// new 出来的 vm对象，就是 MVVM 中的 VM 层
var vm = new Vue({
el: '#app', // 表示当前new的 Vue实例要控制的页面区域
// data 是 MVVM 中的 M 层，专门用来保存每个页面的数据
data: { // data属性中存放的是 el 中要用到的数据
msg: 'Hello World' // 通过 vue 提供的实例，很方便的渲染到页面上，不需要再手动操作DOM元素
}
})
</script>
</body>
</html>
