特点： 易用 灵活 性能(体积小/DOM快/优化) 社区活跃
架构设计上采用MVVM模式
核心：双向绑定，数据的改变就能引起页面的改变--页面的改变就能引起数据的改变
Vue使用一：直接下载相关文件引入到HTML页面
vue使用二：脚手架安装
新建文件夹---》shift建-在此处打开命令窗口---》npm install vue--》回车--》开始下载 //需要安装 Node.JS
文件夹目录：
dist--》要用的文件全部在这里面--》vue.js / vue.min.js
开始使用
<head>
引入相关文件
</head>
<body>
<div id="app">
</div>
</body>
MVVM模式：
1.创建ViewModel实例(简写vm)，通过这个实例操作 view 和操作 model
所以要在 <script></script>里面创建实例
var vm = new Vue({})
2.挂载
默认挂载（视图挂载） el:'' //要关联的是哪一部分HTML内容
el:'' 里传递的是一个选择器，所以在使用的时候直接把 id 名或者 .class类名放进去进行页面的关联
el:'app'
el:'.className'
挂载完毕之后 viewModel 和 vue（页面）就产生了关联
2.数据挂载：
data:{} //vue中的 model:数据
vue中使用的数据写在这里面
vue中使用双大括号进行数据关联 {{}}
<body>
<div id="app">
<p>{{hj}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
hj:'西门吹雪'
}
})
</script>
vue中的指令:
指令一 ：v-model="hj"
hj对应data:{}中的数据
双向绑定数据
比如用在input输入框，可以实现数据与输入框输入的数据同步发生变化
指令二 ： v-once
只变换一次？
比如两个p标签的值与input绑定数据变换关系，当第一个p元素获取到第一次值之后就不再发生改变，
后边没有绑定 v-once 的标签继续随input输入框改变
指令三 ： v-if=""
条件渲染指令，根据表达式的真假来添加或删除元素，参数的值为布尔型
""里面可以直接放一个表达式，根据这个表达式的值与data里面的数据做对比，再判断是否为真
比如显示和隐藏，假的数据会被注释起来
指令四 : v-show=""
也是条件渲染指令，与 v-if不同的是v-show的元素会始终渲染并保持在DOM中，
v-show是根据表达式的真假值，切换元素的display属性，当为假的时候把属性改为none
当条件变化时该指令触发过度效果
v-if 与 v-show 的应用场景
v-if是真实的条件渲染，因为它会确保条件块在切换当中适当的销毁与重建条件块内的事件监听器
和子组件
v-show则只是简单的基于CSS显示隐藏属性值切换
v-if有更高的切换消耗而v-show有更高的初始渲染消耗
因此，如果需要频繁切换建议使用v-show
如果在运行时条件不太可能改变则使用 v-if比较好
v-if反复创建销毁，成本高，
指令五 : v-else
与v-if/v-show结合使用，但是不能单独使用
<p v-if/v-show=""></p>
<p v-else></p>
Error compiling template： 语法错误
v-if=""
v-else-if=""
v-else-if=""
v-else
指令六 : v-for
v-for的优先级高于v-if/v-show
常用于遍历数组，也可以遍历对象/number/string
<p v-for="(score,index) in hj">{{index + ':' + score}}</p> //(score,index)索引？
data:{
hj:[100,20,45,]
}
遍历对象：
<p v-for="hj in dog">{{hj}}</p>
data:
dog:{name:'西门吹雪',age;4,...}
指令七和指令八 ： v-text,v-html
v-text
可以往页面中添加一些文本或者标签
用法和JQ中的类似
添加v-text=""之后不能再在后面添加文本
比如：
<p v-text="hj">{{hj}}jjjj</p> //页面中无法再显示jjjj,没有添加v-text之前可以
v-html
在标签之中添加一些新的标签
<div v-html="html"></div>
在data中：
html:'<input type="输入框的类型/text/password/data"> //会在div中添加
但是不能直接在<div>西门吹雪</div>中直接添加文本，这样无效
指令九 v-bind
动态的绑定一个或多个特性，
给一个标签的属性添加，中间用:隔开，也可以省略只写：
<img :src="hj.img">
绑定属性 v-bind:src=""
绑定类 :class=""
绑定样式 :style=""
指令十 v-on
动态的绑定一个或多个特性，或一个组件prop到表达式，
其作用和v-bind类似，
注意：如果用在普通元素上时，只能监听原生DOM事件，
但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件
v-bind针对的是属性/样式/类
v-on针对的是事件
使用方法：
1. <p v-on:click=""></p>
2. <p @click=""></p>