Vue day02

更新DOM对象的innerText/innerHTML
v-text="Vue数据变量"
 v-html="Vue数据变量"
 注意: 会覆盖插值表达式
区别
v-text把值当成普通字符串显示
v-html把值当成标签进行解析显示

 

vue如何控制标签显示/隐藏
v-show或v-if, 给变量赋予true/false, 显示/隐藏
区别
v-show是用css方式隐藏标签
v-if直接从DOM树上移除
v-if 可以配合v-else或者v-else-if使用

 

v-for如何循环列表?
1. 谁想循环就把v-for写谁身上
2. v-for=“(值变量, 索引变量) in 目标结构”-一定注意in两
边必须有空格
3. 可以遍历数组 / 对象 / 固定数字
v-for注意事项?
值变量和索引变量不能用到v-for范围以外

 

虚拟dom:
1. 虚拟DOM是什么?
本质就是一个JS对象, 保存DOM关键信息
2. 虚拟DOM好处?
提高DOM更新的性能, 不频繁操作真实DOM,
在内存中找到变化部分, 再更新真实DOM(打补丁)

diff算法:
1.diff算法如何比较新旧虚拟DOM?
同级比较
2. 根元素变化?
删除重新建立整个DOM树
3. 根元素未变, 属性改变?
DOM复用, 只更新属性

key的作用:
1. 子元素或者内容改变会分diff2种情况比较
无key, 就地更新
有key, 按照key比较
2. key值要求是?
唯一不重复的字符串或者数值
3. key应该怎么用?
有id用id, 无id用索引
4. key的好处?
可以配合虚拟DOM提高更新的性能

给标签class属性动态赋值
:class=“{类名: 布尔值}”, true使用, false不用

给标签动态设置style的值
语法 :style="{css属性名: 值}"