Vue框架
Vue框架
一. 什么是Vue
1 Vue是一款用于构建用户界面的渐进式的JavaScript框架。(官方：)
2 框架：就是一套完整的项目解决方案，用于快速构建项目
3 优点：大大提升前端项目的开发效率
4 缺点：需要理解记忆框架的使用规则(参照官网)
二. Vue快速入门
1 准备
(1) 引入Vue模块(官方提供)
(2) 创建Vue程序的应用实例，控制视图的元素
(3) 准备元素(div)，被Vue控制
Vue-快速入门
//差值表达式
{{message}}
{{number}}
三. 常用指令
指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同的含义，可以实现不同功能
| 常用指令 | 作用 |
|---|---|
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
| v-bind | 为HTML标签绑定属性值，如设置href，css样式等 |
| v-if/v-else-if/-v-else | 条件性的渲染某个元素，判断为ture时渲染，否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-model | 在表单元素上创建双向点数据绑定 |
| v-on | 为HTML标签绑定事件 |
四. v-for指令
1 作用：列表渲染，遍历容器的元素或者对象的属性 2 语法：|{{item}} 3 参数说明： items为遍历的数组； item为遍历出来的元素； index为索引/下标，从0开始；可以省略，省略后的语法： v-for=“item in items” :key：:与key是紧挨着的，分开会报错，作用给元素添加的唯一标识，便于Vue进行列表项的正确排序复用，提高渲染性能；推荐使用id作为key(唯一)，不推荐使用index作为key(会变化，不对应) 注意：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用v-for指令
常用指令v-for
| 编号 | 姓名 | 年龄 | 性别 |
|---|---|---|---|
| — | — | — | — |
| {{item.id}} | {{item.name}} | {{item.age}} | {{item.gender}} |
五. v-bind
1 v-bind：动态为HTML标签绑定属性值，如href、src、style样式等； 语法：v-bind:属性名=“属性值” 简化 :属性名=“属性值" 注意：动态的为标签的属性绑定值，不能使用差值表达式，得使用v-bind指令。且绑定的数据，必须在data中定义。
常用指令v-for
| 编号 | 姓名 | 头像 | 年龄 | 性别 |
|---|---|---|---|---|
| — | — | — | — | — |
| {{item.id}} | {{item.name}} | |||
| item.name | {{item.age}} | {{item.gender}} |
六. v-if、v-show
1 作用：这两类指令，都是用来控制元素的显示与隐藏的 2 v-if语法：v-if=“表达式”，表达式为ture显示，false隐藏；原理：基于条件判断，用来控制创建或者移除元素节点(条件渲染)；要么显示要么不显示，不频繁切换；可以配合v- else-if / v-else进行链式调用条件判断 注意：v-else-if必须出现在v-if之后，可以出现多个；v-else必须出现在v-if/v-else-if之后 3.v-show语法： v-show=“表达式”，表达式值为ture显示，false隐藏；原理：基于css样式display来控制显示与隐藏；频繁切换显示隐藏的场景
常用指令v-if、v-show
| 编号 | 姓名 | 头像 | 年龄 | 性别 |
|---|---|---|---|---|
| — | — | — | — | — |
| {{item.id}} | {{item.name}} | item.name | {{item.age}} | 男 女 未知 |
七. v-model、v-on
1 v-model：在表单元素上使用，双向数据绑定。可以方便的获取 或 设置表单项数据
语法：v-model = “变量名”；v-model中绑定的变量，必须在data中定义
2 v-on：为HTML标签绑定事件(添加事件监听)
语法：v-on：事件名=“方法名” 简写为 @事件名=“…”
methods函数中的this指向Vue实例，可以通过this获取data中定义的数据
methods与data同级
