vue指令-v-for

列表渲染，所在标签结构，按照数据数量，循环生成

语法：

•  v-for = “（值  , 索引）in  目标元素”
• v-for = "值 in 目标结构"

目标结构

• 可以遍历数组、对象、数字、字符串（可遍历结构）

注意：

        v-for的临时变量不能用到v-for范围以外

        谁需要循环循环添加给谁加v-for

<template>
  <div>
    <ul>
      <!-- v-for="(值的变量名，索引名) in 目标结构" -->
      <li v-for="(item, index) in arr" :key="index">
        {{ item }} --- {{ index }}
      </li>
    </ul>

    <!-- 对象 -->
    <ul>
      <li v-for="obj in stuArr" :key="obj.id">
        <span> {{ obj.name }}</span>
        <span> {{ obj.sex }}</span>
        <span> {{ obj.hobby }}</span>
      </li>
    </ul>

    <div>
      <p v-for="(value, key) in tObj" :key="key">
        <!-- key name age class -->
        <span>{{ key }}</span>  
        <!-- 小黑 -->
        <span>{{ value }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>

<style>
</style>

$set 改变原始数组

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

• push() 往数组最后面添加数据

• pop() 删除数组最后面的数据

• shift() 删除数组最前面的数据

• unshift() 往数组最前面添加数据

• splice() 替换数据

• sort() 冒泡

• reverse() 颠倒数组的顺序

这些方法不会触发v-for更新

• slice() 截取数组的指定长度

• filter() 返回筛选后需要的数据

• concat() 方法用于连接两个或多个数组。

注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组

 改变原数组的方法才能让v-for更新

vue基础_虚拟dom

.vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 才会渲染显示到真实DOM页面上

虚拟DOM是一个对象 保存了标签的属性、内容和信息

好处1：提高了更新DOM的性能（不用把页面全删除重新渲染）

好处2：虚拟DOM只包含必要的属性（没有把真实的DOM上百个属性）

好处3：只需要遍历一次

总结: 虚拟DOM保存在内存中, 只记录dom关键信息, 配合diff算法提高DOM更新的性能

vue基础_diff算法

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

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

vue基础_diff算法-key

diff算法比较新旧虚拟DOM？

• 根元素改变 — 删除当前DOM树重新建
• 根元素为改变，属性改变 — 更新属性
• 根元素为改变，子元素/内容改变
• 无key — 就地更新  / 有key  — 按key比较

vue基础 动态class

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

语法

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

<template>
  <div>
        <!-- 语法:
      :class="{类名: 布尔值}"
      使用场景: vue变量控制标签是否应该有类名
     -->
    <p :class="{red_str:boll}">动态添加class</p>
  </div>
</template>

<script>
export default {
data () {
  return {
    boll:true
  }
}
}
</script>

<style>
.red_str{
    color: red;
  }
</style>

vue基础-动态style

给标签动态设置style的值

 语法

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

<template>
  <div>
    <!-- 动态style语法
      :style="{css属性名: 值}"
     -->
    <p :style="{backgroundColor: colorStr}">动态style</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      colorStr: 'red'
    }
  }
}
</script>

<style>

</style>

总结: 动态style的key都是css属性名