v-text和v-html

目的: 更新DOM对象的innerText/innerHTML

• 语法:

  • v-text="vue数据变量" 把值当成普通字符串显示

  • v-html="vue数据变量" 把值当成标签进行解析显示

• 注意: 会覆盖插值表达式

vue指令 v-show和v-if

目标: 控制标签的隐藏或出现

• 语法:

  true 为显示 false 为隐藏

  • v-show="vue变量"

  • v-if="vue变量"

• 原理

  • v-show 用的display:none隐藏 (频繁切换使用)

  • v-if 直接从DOM树上移除

• 高级

  • v-else使用

数组翻转：reverse()

数组截取：slice() 覆盖原始数组

更新值：.$set() 参数1: 更新目标结构 参数2: 更新位置 参数3: 更新值

方法会触发数组改变, v-for会监测到并更新页面

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

方法不会触发v-for更新

• slice()

• filter()

• concat()

_vue基础_diff算法

vue用diff算法, 新虚拟dom, 和旧的虚拟dom比较

情况1: 根元素变了, 删除重建

情况2: 根元素没变, 属性改变, ==元素复用==, 更新属性

vue基础_diff算法-key

 根元素没变, 子元素没变, 元素内容改变

无key - 就地更新

有key - 值为索引

• 还是就地更新

有key - 值为id

key的值只能是唯一不重复的, 字符串或数值

v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示

1.6_vue基础 动态class

目标: 用v-bind给标签class设置动态的值

• 语法:

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

1.7_vue基础-动态style

目标: 给标签动态设置style的值

• 语法

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