Vue基础day2

v-for更新监测

口诀

• 数组变更方法, 就会导致v-for更新, 页面更新
• 数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()

<script>
 export default {
     data() {
         return {
             arr : [
                {id: 1, name:'吃饭', isDone: false},
                {id: 2, name:'睡觉', isDone:  true},
                {id: 3, name:'打豆豆', isDone: false}
            ]
         }
     },
     methods: {
         fn() {
             this.arr = this.arr.filter(item => item.id !== 2)
         }
     }
 }
</script>

v-model

作用：将value属性和Vue数据变量，双向绑定到一起

语法

<input v-model="Vue的变量">

双向数据绑定

• 变量变化 -> 视图自动同步
• 视图变化 -> 变量自动同步

v-model用在复选框时, 需要注意

• 非数组 - 关联的是checked属性
• 数组 - 关联的是value属性

v-model修饰符

语法

  v-model.修饰符="Vue数据变量"

常见修饰符

• .number 以parseFloat转成数字类型
• .trim 去除字符串首尾空格
• .lazy 在change时触发而非input时

动态class

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

语法

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

布尔值为true表示类名生效，为false表示类名不生效

动态style

语法

• :style="{css属性名: Vue的变量}"

将Vue的变量的值，赋予css属性名的css属性值

计算属性

什么是计算属性？

• 一个变量的值, 依赖另外一些数据计算而来的结果

语法：

<template>
  <div>
    {{ 计算属性名 }}
  </div>
</template>
<script>
export default {
  data() {
    return {
        a: 10,
        b: 20
    }  
  },
  computed: {
    计算属性名() {
      return this.a + this.b
    }
  }
}
</script>

注意：

• 计算属性也是vue数据变量, 所以不要和data里面的Vue变量重名, 用法和Vue变量相同

计算属性vs函数

• 带缓存
• 依赖项不变, 直接从缓存取
• 依赖项改变, 计算属性自动执行并重新缓存值

计算属性_完整写法

语法

<template>
  <div>
    <input type="text" v-model="计算属性名">
  </div>
</template>
<script>
export default {
  computed: {
    计算属性名: {
      set(val) {},
      get() {}
    }
  }
}
</script>

什么时候使计算属性完整写法？

• 给计算属性变量赋值时

set函数和get函数什么时候执行?

• 给计算属性赋值时 set 函数就会被触发
• 使用计算属性时 get 函数就会被触发

侦听器_watch

可以侦听data里面变量的值改变

<template>
  <div>
    <input type="text" v-model="被侦听的Vue变量">
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  watch: {
    被侦听的Vue变量(newVal, oldVal) {

    }
  }
}
</script>

注意：侦听器的名字一定要被侦听的Vue变量一样

侦听器完整写法

侦听复杂类型的时候需要使用 侦听器完整写法

<template>
  <div>
    <input type="text" v-model="被侦听的Vue变量">
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: '',
      obj: {
          age: 18
      }
    }
  },
  watch: {
    被侦听的Vue变量: {
        deep: true,
        handler(newVal,oldVue) {
            
        }
    },
    'obj.age'(newVal,oldVue) {
        
    }
  }
}
</script>