v-text和v-html
-
语法:
-
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
-
语法:
-
:class="{类名: 布尔值}"
-
1.7_vue基础-动态style
-
语法
-
:style="{css属性: 值}"
-
