vue动态class、style、过滤器、计算属性、侦听器小结

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

二、diff 算法 ：用于新虚拟dom 和 旧虚拟dom 比较

1、根元素变化→删除重新建立DOM树
2、根元素未变化，属性改变→DOM复用，更新属性
3、根元素未变化，子元素未变化，元素内容改变：
①无 key 就地更新
②有key值为索引 就地更新
③有key - 值为id key的值只能是唯一不重复的, 字符串或数值

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

语法：class="{类名: 布尔值}"
总结: 就是把类名保存在vue变量中赋予给标签

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

<script>   //在script标签中写bool的对错
export default {
  data(){
    return {
      bool: true
    }
  }
}
</script>

<style scoped>  //在style标签中写样式
  .red_str{
    color: red;
  }
</style>

四、动态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>

五、vue 过滤器 ：转换格式, 过滤器就是一个函数, 传入值返回处理后的值

单个过滤器语法：
①Vue.filter(“过滤器名”, (值对应的操作) => {return “返回处理后的值”}) //全局注册
②filters: {过滤器名字: (值 | 过滤器) => {return “返回处理后的值”} //局部过滤器只能在当前vue文件使用
全局注册最好在main.js中注册, 一处注册到处使用
多个过滤器语法：
①过滤器传参：vue变量 | 过滤器（实参）
②多个过滤器：vue变量 | 过滤器1 | 过滤器2
过滤器只是单纯的名字，方法需要自己定义

<template>
  <div>
    <p>{{ msg }}</p>  // 原来的样子:

    <p>{{ msg | reverse('实参') }}</p>  // ①使用翻转过滤器 msg值写在return中 ②全局过滤器
    <p :title="msg | toUp | 第二个过滤器 ">鼠标长停</p>  
    
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'Hello, Vue'
    }
  },
  // 方式2: 局部 - 过滤器 只能在当前vue文件内使用
  //  语法:  
     filters: {
       过滤器名字 (val) {
         return 处理后的值
       }
     }
  */
  filters: {
    toUp (val) {  // toUp是过滤器名字
      return val.toUpperCase()  //返回处理后的值
    }
  }
}
</script>
<style>
</style>

六、计算属性 computed：一个数据依赖另外一些数据计算而来的结果

1、语法：

computed: {
    "计算属性名" () {
        return "值"
    }
}

2、计算属性也是vue数据变量，所以不要和data里重名，用法与data相同
3、计算属性的优势：
①带缓存
②计算属性对应函数执行后，会把return值缓存起来
③依赖项不变，多次调用都是从缓存取值
④依赖项值变化，函数会“自动”重新执行，并缓存新的值
4、完整写法（给计算属性变量赋值时使用）：

computed: {
    "属性名": {
        set(值){  //set接受赋予的值
        },
        get() {
            return "值"  //get里要返回给这个计算属性具体值
        }
    }

}

七、 侦听器 watch ：侦听data/computed属性值改变

// 基础侦听
watch: {
    "被侦听的属性名" (newVal, oldVal){  // (当前最新值，上一刻的值)      
    }
}

//深度侦听和立即执行
watch: {
    "要侦听的属性名": {
        immediate: true, // 立即侦听(网页打开handler执行一次)
        deep: true, // 深度侦听(对象里面层的值改变)
        handler (newVal, oldVal) {
        }
    }
}