Vue基本代码和MVVM之间对应关系
目录
一、Vue.js 基本代码
二、MVVM 里的三层区分
一、Vue.js 基本代码
首先新建一个文件夹（code）用 Open with Code 打开，用到了 Vue 就要导入相关的包。
在文件里新建一个 lib，把包复制到文件里。
在目录里新建一个01.Vue 的基本代码.html,然后初始化一个页面结构。
1、导入 Vue 的包
<script src="./lib/vue-2.4.0.js"></script>
2、创建一个 Vue的实例
当导入包之后，在浏览器的内存中，就多了一个Vue 构造函数
Var vm-new vue({
})
在 new Vue的时候需要配置对象，有几个属性：
el：
//表示，当前我们new 的这个 Vue 实例，要控制页面上的哪个区域。
这时候并没有要控制的区域，所以
<div id="app"></div>
（将来 new 的 Vue 实例会控制这个元素中的所有内容）。
通过 el 属性指定一个选择器：
el：’#app’
data：
//data属性中，存放的是 el 中要用到的数据。
data：{msg：‘欢迎学习Vue’
}
如果想把 msg渲染为一个标签：
一般往<p>标签里放入内容需要进行dom 操作，先给p 起一个 id，导入 jquery，之后通过选择器写入尾代码，这时只要渲染界面数据就出来了。
但现在用到了 vue 以后就省去了操作 dom 的步骤。
直接通过 Vue 提供的指令很方便的就能把数据渲染到页面上，程序员不在手动操作 DOM 元素【前端的Vue 之类的框架，不提倡我们去手动操作 DOM 元素】
所以：
<p>{{ msg}} </p> //表达式
Date里面所有数据就能直接引用。
完成之后保存右键点击View ln Browser就会出现页面：欢迎学习 Vue，右键检查源码显示标签。
到此为止，Vue 中最基本的代码就已经写完了，写完之后要区分 MVVM 里的三层。
二、MVVM 里的三层区分
<div id="app"></div>
<p>{{ msg}} </p> ： Vue
实例所控制的这个元素区域，就是我们的V
Var vm-new vue({
el：’#app’
data：{msg：‘欢迎学习Vue’
}
})
new出来的这个 vm 对象，就是我们 MVVM 中的 VM调度者。
注意要把MVVM 里的MOD 和 MVC里的MOD 区分开：这里的 data 就是 MVVM中的 M, 专门用来保存每个页面的数据。
