工作总结#2

<template>
  <div>
    <input type="text" v-model="val" />
    <p>{{ comVal("sss") }}</p>
    <p>{{ comVal("") | filVal }}</p>
    <div>
      {{ arr | filArr }}
    </div>
    <div>
      {{ arr }}
    </div>
  </div>
</template>

watch:{}  监听事件，会记录新值和旧值的变化，但只记录这一次

watch: {
    val(nVal, oVal) {
      console.log("val值变化", nVal, oVal);
    }
  },

computed:{} 计算事件，创建缓存，提升加载速度

computed: {
    comVal() {
      return str => {
        return str + this.val + "jfie";
      };
    }
  },

filters:{} 过滤器

filters: {
    // 字符串过滤
    filVal(val) {
      return val.substring(0, 5);
    },
    // 数组过滤
    filArr(arr) {
      return arr.filter(item => {
        item.a = 2;
        return true;
      });
    }
  },

created方法 ( 创建后 ）

created钩子可以用来在一个实例被创建之后执行代码

mounted方法

挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

 

components 外置组件

1. 引用组件 import facePop from './components/facePop'
2. 注册组件 components = { 'my-facepop': facePop }
3. 使用组件 <my-facepop></my-facepop>

 

 监听方法中监听对象里的数据就要写成字符串