Vue基础

149 阅读1分钟

一、计算属性computed

1.在computed属性对象中定义计算属性的方法
2.使用:{{方法名}}
3.通过getter/setter实现对属性数据的显示和监视
4.计算属性存在缓存, 多次读取只执行一次getter计算
5.一定有返回值,返回值就是计算属性要显示的内容
6.不能做异步操作
7.有缓存,只有依赖的值发生变化才会重新计算
// 使用
computed: {
  // 只读
  xxx() {
    // 获取参与计算的数据
    // 开始计算
    // 返回结果
  },
  // 可读可写
  xxx: {
    get() {},
    set(val) {}
  }
}

二、监视属性watch

1.监视一个已存在的属性,一旦属性发生变化,就会触发回调
2.没有返回值
3.可以进行异步操作
4.deep:true开启深度监视
5.immediate:true 页面加载立即监视
// 使用
watch: {
  // 第一次不会触发
  xxx(newVal, oldVal) {},
  // 第一次会触发
  xxx: {
    handler(newVal, oldVal) {},
    immediate: true
  },
  // 监视对象中的数据
  xxx: {
    handler(newVal, oldVal) {},
    deep: true
  },
}

三、事件指令

1.@click="事件回调函数"1)如果没有传值,则直接调用
        (2)如果传入参数,在函数形参上可以使用...args的方式拿到所有参数,如果没有传入事件对象,则在函数内部没有事件对象
        (3)传入事件对象,$event
2.	@click.prevent 阻止默认事件
        @click.stop 阻止冒泡

3.	@keyup.enter 和@keyup.13 是一样的