什么是vue
Vue是一款用于构建用户界面的渐进式的JavaScript框架
Vue将服务器端返回的数据渲染展示在页面中
框架：就是一套完整的项目解决方案，用于快速构建项目
优点：大大提升前端项目的开发效率
缺点：需要理解记忆框架的使用规则
Vue的使用步骤：
准备工作：
- 引入vue模块
- 创建vue的应用实例
- 定义元素（div），交给vue控制
数据驱动视图：
- 准备数据
- 用插值表达式渲染
常用指令
指令：html标签上带有v-前缀的特殊属性，不同的指令具有不同的含义
常用指令：
v-for
作用：列表渲染，遍历容器的元素或者对象的属性
语法：<tr v-for = “(item,index) in items” :key = “item.id”> {{item}} </tr>
参数说明：
- items为遍历的数组
- Item 为遍历出来的元素
- Index为索引/下标，从0开始；可以省略，省略index语法: v-for = “item in items
Key:
- 作用:给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
- 推荐使用id作为key，不推荐使用index作为key（会变化）
v-bind
作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
语法：v-bind:属性名=”属性值” <img v-bind:src=”item.image” width=”30px”>
简化：:属性名=”属性值” <img :src=”item.image” width=”30px”>
v-if & v-show
作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if：
1.语法：v-if=”表达式”，表达式值为 true，显示；false，隐藏
2.原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
3.场景：要么显示，要么不显示，不频繁切换的场景
4.其它：可以配合 v-else-if / v-else 进行链式调用条件判断
v-show：
1.语法：v-show=”表达式”，表达式值为 true，显示；false，隐藏
2.原理：基于CSS样式display来控制显示与隐藏
3.场景：频繁切换显示隐藏的场景
v-model
作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
语法：v-model=”变量名”
这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示 。 视图中的输入的数据变化，也会影响Vue的数据模型 。
v-on
作用：为html标签绑定事件（添加时间监听）
语法：
1.v-on:事件名=”方法名”
2.简写为 @事件名=”…”
