vue指令学习理解

1、v-text和v-html

用于更新DOM对象的innerText/innerHTML

语法：v-text="vue 数据变量" （v-text会把值当成普通字符串显示）

v-html = "vue 数据变量" （v-html会把值当html解析）

<template>
  <div>
    <p v-text="cc"></p>
    <p v-html="cc"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cc: "<span>这是一个span标签</span>"
    }
  }
}
</script>

2、v-show和v-if

用于操作标签的隐藏显现

语法： v-show="vue变量" （用的display:none隐藏，频繁切换时使用）

v-if = " vue变量"  （直接从DOM树上移除）

<template>
  <div>
    <h1 v-show="xian">v-show的盒子</h1>
    <h1 v-if="xian">v-if的盒子</h1>

    <div>
      <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xian: true,//显示
      age: 15
    }
  }
}
</script>

3、v-for

用于列表渲染，循环生成

语法：v-for="(值,索引) in 目标结构)"

v-for = "值 in 目标结构 "

其中目标结构可以是数组，对象，数字，字符串

谁循环就写在谁身上

4、v-for更新监测

数组变更方法会导致v-for更新，页面更新。数组非变更方法，返回新数组不会导致v-for更新，可以用覆盖数组或者this.$set()

例如：push（），pop（），shift（），unshift（），splice（），reverse（）会触发v-for更新，而slice（），filter（），concat（）不会触发v-for更新。

关于虚拟DOM

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

内存生成一样的虚拟dom结构，其本质是一个js对象。

当vue数据更新时，生成新的虚拟dom结构并和旧的虚拟dom结构对比，利用diff算法找不同，只更新变化的部分到页面。

diff算法

vue是用diff算法将新旧虚拟DOM比较的

情况1、根元素变了，直接删除重建。

情况2、根元素没变属性改变，元素复用，更新属性

情况3、根元素没变，子元素没变，元素内容改变。分有无key而变

有key值：以值为索引，找到区别将新的补上页面。

无key值：v-for不会移动dom，而是尝试复用，就地更新。

注：key值智能是不重复的字符串或者数值（个人理解为是锚点一样的东西）

动态class

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

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

<template>
  <div> 
    <p :class="{red_str: bool}">动态class</p>
  </div>
</template>

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

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

动态style

语法：:style="{css属性:值}"

用于给标签动态设置style的值

vue过滤器

用于转换格式，过滤器就是一个函数，传入值返回处理后的值。

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

语法：

• Vue.filter("过滤器名", (值) => {return "返回处理后的值"})

• filters: {过滤器名字: (值) => {return "返回处理后的值"}

还可以传参和多过滤器

语法：过滤器传参：vue变量|过滤器(实参)

多个过滤器：vue变量|过滤器1|过滤器2

可以同时使用多个过滤器，或者给过滤器传参