一、介绍
1. vue是什么？
一套用于构建用户见面的渐进式JavaScript框架
构建用户界面：使用某种方式拿到数据，将数据放到合适的位置
渐进式：vue可以自底向上逐层应用（既可以构建简单应用，也可以构建一个复杂应用）
二、vue与jQuery、原生js对比
vue完全的脱离dom操作
三、特点:
(1)采用组件化开发，提高代码的复用率，并且让代码更好的维护
(2)声明式编码，让编码人员无需直接操作DOM，提高开发效率
命名式编码：原生js或jquery
(3)使用虚拟DOM+Diff算法，，尽量复用DOM节点
虚拟dom
p1 =[{name：‘tom’，age:12},{name：‘terry’，age:15}]
p2 =[{name：‘tom’，age:12},{name：‘terry’，age:15}] 虚拟dom转化为真实dom
p2 = [{name:'tom',age:12},{name:'terry',age:13},{name:'curry',age:14}]
四、安装
(1)直接使用script标签引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>这是cdn的方式，
也可以将vue源码下载到本地（开发版和生产版）
(2)npm方式
npm install vue
在用 Vue 构建大型应用时推荐使用 NPM 安装，通常会配合vue/cli
五、初识vue：
1.想让vue工作，就必须创建一个vue实例，并且传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法；
3.root容器里的代码被称为【vue模版】；
4.vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
表达式&&js代码(语句)
表达式：1）var b = a
2）var r = a === b?'true':'false'
语句： if(){},for()
<!-- 容器 -->
<!-- 模版 -->
<div id="root">
<h1>hello {{s.name}}</h1>
</div>
</body>
<script>
//关闭调试信息
Vue.config.productionTip = false;
//实例化vue对象
const x = new Vue({ //构造函数使用new操作符,vue只传一个参数为对象
el:'#root', //将我们创建出来的vue实例作用于哪个容器上，el的取值通常使用选择器字符串
data:{ //data用来存放数据
name:'briup',
s:{
name:'tom',
age:12
}
}, //用来存放数据
});
</script>