A difference between the rear end of the front end of the MVC MVVM
- MVC is a hierarchical concept developed back-end;
- MVVM layer is a conceptual view of the distal end, focused view of the separation layer, that is to say: a front end view of the MVVM layer, is divided into three parts Model, View, VM ViewModel
Second, the correspondence between the basic code and MVVM Vue.js
MV is an example vue
El V is a corresponding view of vue
M is a corresponding view data in vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!--1.------------V---------------->
<!-- Vue 实例所控制的这个元素区域，就是我们的 V -->
<!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 -->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 2.------------MV------------
// 创建一个Vue的实例
// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
// 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var vm = new Vue({
// 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
el: '#app',
// data 属性中，存放的是 el 中要用到的数据
// 3.---------------M-------------------
//这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: {
// 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
msg: '欢迎学习Vue'
}
})
</script>
</body>
</html>