Vue学习

vue指令

更新DOM对象的内容

v-text="vue数据变量" // 值为普通字符串

v-html="vue数据变量" // 值当做html解析(解析标签)

(都会覆盖插值表达式)

标签显示与隐藏

v-show="vue变量"  //  用display:none隐藏,频繁切换时使用

v-if="vue变量" // 从DOM树移除

v-else

循环遍历

v-for = " ( 值 , 索引 ) in 目标结构 "
v-for = " 值 in 目标结构 "
v-for = " ( 值 , 键 ) in 目标结构 "
v-for = " 值 in 数字 "

// 目标结构:可遍历数组/对象/数字/字符串

v-for更新监测
数组变更方法, 就会导致v-for更新, 页面更新  // push、pop、unshift、shift、sort、splice、reverse
数组非变更方法, 返回新数组, 就不会导致v-for更新  //  slice、filter、concat
  需要v-for更新，可采用覆盖数组或this.$set(参数1,参数2,参数3)
  参数1: 更新目标结构
  参数2: 更新位置
  参数3: 更新值

虚拟DOM

本质是保存节点信息,属性和内容的一个JS对象

1. 模版生成虚拟DOM
2. 虚拟DOM生成真实DOM
3. 数据更新
4. 生成新虚拟DOM
5. 对比新旧虚拟DOM
6. 利用diff算法找不同,去更新真实DOM

好处:

虚拟DOM只包含必要属性
可以提高更新的性能

diff算法

• 根元素变了,删除重建
• 根元素没变,属性改变,则元素复用,更新属性
• 根元素没变,子元素没变,内容改变(添加key可以提高性能)

1. 无key,就地更新
2. key值为索引,就地更新
3. key值为id,按key值比较更新

动态class

:class="{类名 : 布尔值}"

动态style

:style="{css属性 : 值}"

过滤器

目的: 转换格式

只能在插值表达式和v-bind表达式中使用，多个过滤器间用管道符 | 连接

• Vue.filter("过滤器名",(值,参数)=>{return '返回值'})
• filters:{ 过滤器名(参数): (值)=>{return '返回值'}}