理解库和框架
一、什么是库
把一些常用的功能封装成一个个函数或对象，并放到一个js里，目的是为简化原生js的操作，它是一个封装好的集合
比如Jquery，它就是一个库
在Jquery 出现之前，我们用原生js操作Dom非常的麻烦，有了Jquery，它帮我们做了很多事，我们操作Dom则变得好多了，它就称之为库，它解决了开发中的一部分问题
小而美
二、什么是框架
一套架构，提供一套整体解决方案，它能够完全搞定整个项目开发，并且很轻松就能解决复杂的问题。比较大，功能比较全
比如：Vue，augular，react
大而全
MVC 与MVVM
一、MVC
M-Model 模型（数据）
V-View 视图 （结构）
C-Controller 控制器
二、MVVM
M-Model 模型（数据）
V-View 视图 （结构）
VM-ViewModel 控制
认识Vue.js
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
渐进式框架
就是由浅入深，由简单到复杂
1、体积小
压缩后 33k
2、更高的运行效率
基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的Dom操作计算出来并优化的技术，由于这个Dom操作属于预处理操作，并没有真实的操作Dom，所以叫做虚拟Dom。
3、双向数据绑定
让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上
Vue cdn:
开发版：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
生产环境：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
下载Vue.js：
开发版本： (在浏览器打开即可自动下载)
https://cn.vuejs.org/js/vue.js
生产版本： (在浏览器打开即可自动下载)
https://cn.vuejs.org/js/vue.min.js
去项目中引入Vue吧
Helle,word，可以执行执行的！去试一试吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
message:"你好，hello word"
}
});
//加上前缀$,获取Vue数据属性，以便于与用户定义的属性区分开来
vm.$data.message="你好啊";
//观察一个变量的变化，获取变化之前和变化之后的值
//第一个值，要观察的值
vm.$watch('message',function(newValue,oldValue){
//这个回调将在 vm.message 改变后调用
console.log("新的值是："+newValue);
console.log("old的值是："+oldValue);
});
vm.$data.message="Hello word";
</script>
</body>
</html>
