Vue 2.0 笔记

v-for 的更新机制

• 改变数组的方法就会导致 v-for 更新
• 无法改变数组的方法,返回新的数组的,就不会导致 v-for 更新,可采用覆盖数组或者 this.$set(“更新的值”,”更新位置”,”更新值”)

<template>
  <div>
    <h1>v-for 的更新机制</h1>
    <template v-for="item in list">
      <h1 :key="item">{{ item }}</h1>
    </template>
    <button @click="reverse">翻转</button>
    <button @click="slice">截取前3个元素</button>
    <button @click="btn">直接修改第下标0的值为20</button>
  </div>
</template>

<script>
export default {
  name: "v-for",
  data() {
    return {
      list: [1, 2, 3, 4],
    };
  },
  methods: {
    reverse() {
      // 因为原数组被修改了所以触发了更新
      this.list.reverse();
    },
    slice() {
      // slice方法会返回一个新数组,需要把新数组赋值给 this.list 才会触发更新
      // this.list.slice(0, 3);
      let arr = this.list.slice(0, 3);
      this.list = arr;
    },
    btn() {
      // 直接修改数组的值无法触发更新,可以使用 this.$set 方法
      // this.list[0] = 20;
      this.$set(this.list, 0, 20);
    },
  },
};
</script>

<style></style>

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

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

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

• slice()
• filter()

虚拟 DOM

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

内存中生成一样的虚拟 DOM 结构(==本质是个 JS 对象==)

因为真实的 DOM 属性好几百个, 没办法快速的知道哪个属性改变了

使用虚拟 DOM 只包含必要的属性,就可以和旧的虚拟 DOM 进行比较快速找出不同,只更新变化的部分

动态 class

• 用 v-bind 给标签 class 设置动态的值
• v-bind 的简化语法 :class

<template>
  <div>
    <h1 v-bind:class="{ red: flag }">动态class</h1>
    <button @click="btn">按钮</button>
  </div>
</template>

<script>
export default {
  name: "class",
  data() {
    return {
      flag: "red",
    };
  },
  methods: {
    btn() {
      this.flag = !this.flag;
    },
  },
};
</script>

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

动态 style

• 用 v-bind 给标签 style 设置动态的值
• v-bind 的简化语法 :style

<template>
  <div>
    <h1 :style="{ background: colorRed }">动态style</h1>
    <button @click="btn">按钮</button>
  </div>
</template>

<script>
export default {
  name: "Dstyle",
  data() {
    return {
      colorRed: "red",
    };
  },
  methods: {
    btn() {
      if (this.colorRed === "red") {
        this.colorRed = "yellow";
      } else {
        this.colorRed = "red";
      }
    },
  },
};
</script>

<style></style>

过滤器

• 过滤器是一个函数,传入值返回处理后的值

• 过滤器只能用在, ==插值表达式和 v-bind 表达式==

• 语法

  • 全局过滤器 Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})
  • 局部过滤器 filters: {过滤器名字: (值) => {return “返回处理后的值”}

<template>
  <div>
    <h1>过滤器</h1>
    <div>{{ str }}</div>
    <span>{{ str | reverse }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "admin",
    };
  },
  filters: {
    reverse(value) {
      console.log(value);
      return value.split("").reverse().join("");
    },
  },
};
</script>

<style></style>

传参和多个过滤器的同时使用

<template>
  <div>
    <h1>过滤器</h1>
    <div>{{ str }}</div>
    <h2>过滤器传参</h2>
    <span>{{ str | reverse("123") }}</span>
    <h2>多个过滤器的使用</h2>
    <div>{{ str | reverse("123") | UpCase }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "admin",
    };
  },
  filters: {
    reverse(value, data) {
      console.log(value);
      console.log(data); // 接收传过来的参数
      return value.split("").reverse().join("") + data;
    },
    UpCase(value) {
      return value.toUpperCase();
    },
  },
};
</script>

<style></style>

计算属性 computed

• 可以根据数据的变化而实时变化的数据

• 语法

  • computed: {
        "计算属性名" () {
            return "值"
        }
    }
    ```vue
    <template>
      <div>
        <p>{{ num }}</p>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          a: 10,
          b: 20,
        };
      },
      // 注意: 计算属性和data属性都是变量-不能重名
      // 注意2: 函数内变量变化, 会自动重新计算结果返回
      computed: {
        num() {
          return this.a + this.b;
        },
      },
    };
    </script>
    

计算属性的完整写法

• 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法

• 语法

  • computed: {
        "属性名": {
            set(值){
    
            },
            get() {
                return "值"
            }
        }
    }
    ```vue
    <template>
      <div>
        <div>
          <span>姓名:</span>
          <input type="text" v-model="full" />
        </div>
      </div>
    </template>
    
    <script>
    export default {
      computed: {
        full: {
          // 给full赋值触发set方法
          set(val) {
            console.log(val);
          },
          // 使用full的值触发get方法
          get() {
            return "无名氏";
          },
        },
      },
    };
    </script>