1v-for更新监测
目标：目标结构变化, 触发v-for的更新
口诀:
数组变更方法, 就会导致v-for更新, 页面更新
数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()
可以直接触发 v-for跟新的
push () pop() shift() unshift() splice() sort() reverse()
不可以直接触发 v-for跟新的
filter() concat() slice()
解决方法 ：
➢ 拿返回的新数组, 直接替换旧数组 赋值
➢ this.$set()方法更新某个值
2虚拟DOM
目标：本质是保存节点信息, 属性和内容的一个JS对象
虚拟DOM好处是?
➢ 提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找
到变化部分, 再更新真实DOM相应属性或内容(打补丁)
3 .Vue基础_key作用
目标：无key发生更新的状态
无key属性, 图解 - 最大限度尝试就地修改/复用相同类型元素
有key值为索引**, 基于key的来比较新旧虚拟DOM, 移除key不存在元素**
要求: key值唯一不重复的字符串或数字
给每个数据换成对象, 准备id, 把id的值作为key
key应该怎么用?
➢ 有id用id, 无id用索引
子元素或者内容改变会分哪2种情况比较?
➢ 无key, 就地更新
➢ 有key, 按照key比较
. key的好处?
➢ 可以提高更新的性能
<li v-for= " (item,index) in arr " :key= " index " >
{{ item }}
</li>
id
<li v-for= " obj in brr " :key= " obj.id " >
{{ item }}
</li>
4 . 动态class
语法 :class="{类名: 布尔值}" 布尔值为true , key作为类名生效 / true使用, false不使用
<template>
<div>
<!-- v-bind:class="{类名：布尔值}" -->
<!-- 如果布尔值 为true 表示类名生效
如果布尔值 为ffalse 表示类名不生效 -->
<p :class="{red: 5>4}">hello</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.red{
color: red
}
</style>>
</style>
5.动态style
目标: 给标签动态设置style的值
语法 :style="{css属性名: 值}"
<div>
<p :style= "{color : colorStr}"> value变量的值,将赋予给css属性的key生效 </p>
</div>
data(){
return {
colorStr : 'red'
}
}
给style赋值和class区别是?
➢ :class="{类名: 布尔值}",true使用, false不使用
➢ :style="{css属性名: 值}"
