Vue 02Day Knowledge Point

一.v指令 v-for

1.v-for

作用：可以遍历 数组 或者 对象，用于渲染数结构

遍历数组的方法：

v-for=”item in 数组名”

<template>
<div>
  <ul>
    <!-- 循环生成标签  item指向数组中的每一个元素-->
    <li v-for="item in goodList" :key="item">
      <h1>{{item.name}}</h1>
      <h1>{{item.age}}</h1>
    </li>
  </ul>
</div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      goodList:[
        {
          name:'小明',
          age:18,
        },
        {
          name:'小红',
          age:16,
        },
      ]
    }
  }
}
</script>
<style>
</style>

v-for=”(item, index) in 数组名”

<template>
<div>
  <ul>
    <!-- 循环生成标签  item指向数组中的每一个元素-->
    <li v-for="item in goodList" :key="item">
      <h1>{{item.name}}</h1>
      <h1>{{item.age}}</h1>
    </li>
  </ul>
  <ul>
    <!-- index 是数组下标 -->
    <li v-for="(item,index) in goodList" :key="item.name">
      {{index}}:{{item.name}}
    </li>
  </ul>
</div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      goodList:[
        {
          name:'小明',
          age:18,
        },
        {
          name:'小红',
          age:16,
        },
      ]
    }
  }
}
</script>
<style>
</style>

遍历对象语法：

v-for = “(value, key) in 对象名”

<template>
<div>
  <ul>
    <li v-for="(value,key) in goodList" :key="value">
      {{value}}:{{key}}
    </li>
  </ul>
</div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      goodList:{
        name:'小明',
        gender:'男',
        age:18,
      }
    }
  }
}
</script>
<style>
</style>

遍历数字：

v-for = “item in 数字”

<template>
<div>
  <ul>
    <!-- 使用场景:轮播图小圆点 -->
    <!-- 遍历数字 v-for="item in 数字" -->
    <li v-for="item in 10" :key="item">{{item}}</li>
    <!-- 打印出来的是1-10 -->
    <li v-for="item in array.length" :key="item">{{item}}</li>
  </ul>
</div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      array:[1,2,3],
    }
  }
}
</script>
<style>
</style>

2.v-for就地更新

v-for 的默认行为会尝试原地修改元素,复用标签就地更新内容，而不是去移动它们

就地更新机制：vue是尽可能复用上一次渲染的DOM

vue会复用上一次渲染的列表，并把它更新成新列表的样子

3.虚拟DOM

1.概念:内存中的js对象，描述的是渲染的DOM结构

2.好处：更高效的对比DOM变化，我们可以对比出变化的部分，只更新变化的内容，减少DOM操作

<template>
  <div>
    <ul>
      <!-- v-for的就地更新和虚拟dom -->
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
    <button @click="list.reverse()">翻转数组</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [1, 2, 3],
    };
  },
};
</script>
<style>
</style>

3.对比虚拟dom？ 为啥不对比 真实 dom 呢？
真实dom太复杂，对比性能效率低

5.拓展：怎么理解vue中的虚拟DOM

原理：    
    用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。
好处：
    1、性能优化
    2、无需手动操作DOM
    3、可以跨平台，服务端渲染等

4.v-for和key的机制

如果不提供key，或者使用索引为key，都采用就地更新机制

如果提供了key，就根据key进行对比，提升对比和更新性能

二.class 和 style

1.v-bind 对于class和style的增强：动态设置class 和 style

动态修饰样式

1.style：对比语法 :style=”{样式属性名：样式的值}”

样式属性名带横线 1.小驼峰 2.加引号

例如：font-size 1.fontSize 2.’font-size’

<template>
  <div>
    <!-- style绑定语法：:style="对象/数组" -->
    <!-- 对象的属性名不能有横线的，这种情况两种方式：第一种使用小驼峰命名，font-size -> fontSize -->
    <!-- 第二种方式，给属性名加引号 -->
    <!-- 属性值不要忘了单位 -->
    <h1 :style="{ 'font-size': '18px', color: 'red' }">hello world!</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style>
</style>

2.class：对象语法：:class=”{ 类名: 布尔值 }”

类名有横线，加引号

数组语法：:class=”数组”

<template>
  <div>
    <!-- 类名绑定，语法:class="对象/数组" -->
    <!-- :class="{ 类名: 布尔值, 类名2: 布尔值 }" -->
    <!-- 可以绑定多个类名 -->
    <h1 class="content" :class="{ warning: age <= 18, large: true }">
      hello world
    </h1>
    <!-- 类名绑定数组语法 -->
    <!-- :class="['类名1', '类名2']" -->
    <h1 :class="['red', 'warning']">byebye world</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      age: 8,
    };
  },
};
</script>
<style>
.warning {
  color: red;
}
</style>

2.点击切换类代码演示

<template>
  <div>
    <!-- 请实现，点击h1标签，字体变大变红，再点击恢复原状 -->
    <h1 :class="{ big: isBig }" @click="isBig = !isBig">hello world</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isBig: false,
    };
  },
};
</script>
<style>
.big {
  color: red;
  font-size: 100px;
}
</style>

三.计算属性

1.计算属性

1.计算属性: 一个特殊属性, 值依赖于另外一些数据动态计算出来。

2.注意：

a. 计算属性必须定义在 computed 节点中
b. 计算属性必须是一个 function,计算属性必须有返回值
c. 计算属性不能被当作方法调用, 要作为属性来用

作用：

声明在computed对象里

简写：声明为一个函数

3.计算属性特点？
1 计算后会立刻缓存，下次直接读缓存
2 依赖项改变, 函数会重新执行 并 重新缓存
多次使用计算属性，性能会极高

<template>
<div>
  <span>年龄{{age}}</span>
  <button @click="year = year - 1">+1 岁</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      year:2000,
    };
  },
  computed:{
    age(){
      const date = new Date();
      return date.getFullYear() - this.year;
    }
  }
}
</script>
<style>
</style>

2.计算属性的缓存说明

计算属性, 基于依赖项的值进行缓存，依赖的变量不变, 都直接从缓存取结果。
计算属性如果被多次使用，性能极高

3.完整写法

完整写法：声明为一个对象

get 读取计算属性的值的时候触发 return 一个值

set 修改计算属性的时候触发 第一个参数是修改的值

<template>
<div>
  <span>年龄{{age}}</span>
  <button @click="age = age + 1">+1 岁</button>
  <h3>出生年份:{{year}}</h3>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      year:2000,
    };
  },
  computed:{
    age:{
      get(){  
      const date = new Date();
      return date.getFullYear() - this.year;
      },
      set(newAge){
        const date = new Date();
        this.year =date.getFullYear()  - newAge;
      }
    }
  }
}
</script>
<style>
</style>

四.侦听器

1.侦听器 watch

简写：

<template>
<div>
  <!-- 侦听器 作用：监听数据变化 -->
  <span>
    {{count}}
  </span>
  <button @click="count++">加一</button>
</div>
</template>
<script>
export default {
  data(){
    return{
      count:100,
    }
  },
  watch:{
    // newVal 是新值 oldVal是旧值
    count(newVal,oldVal){
      console.log(newVal,oldVal);
    }
  }
}
</script>
<style>
</style>

2.侦听器：深度侦听和立即执行

如果监听的是复杂数据类型，需要深度监听，需要指定deep为true, 需要用到监听的完整的写法

完整的写法：