属性-方法-过滤器

computed

• 处理data属性与属性的关系

• 根据data属性的变化动态修改样式

• 动态获取vuex的属性值

<div id="example">
    <!-- 模版表达式写法 -->
   <p>{{ msg.split('').reverse().join('') }}</p>
    <!-- 计算属性写法 有依赖缓存-->
   <p>{{reversedMsg}}</p>
   <!-- 方法写法 每当触发重新渲染时，调用方法将总会再次执行函数-->
   <p>{{ handleReversedMsg() }}</p>
    <!-- 结果为：<div class="active"></div> -->
   <div :class="classObject"></div>
   <!-- 计算属性 set和get配合使用 -->
   <div>个人爱好</div>
   <div><input type="checkbox" v-model="checkAll">全选</div>
   <div><input type="checkbox" v-model="eat">吃饭</div>
   <div><input type="checkbox" v-model="sleep">睡觉</div>
   <div><input type="checkbox" v-model="play">打游戏</div>
   
</div>

data: {
  msg: 'message',
  isActive: true,
  error: null,
  eat: false,
  sleep: false,
  play: false
},
computed: {
  reversedMsg() {
    return this.msg.split('').reverse().join('')
  },
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error
    }
  },
  checkAll: {
    get() {
      return this.eat & this.sleep & this.play
    },
    set(val) {  
      this.eat = val
      this.sleep = val
      this.play = val
    }
  }
},
methods: {
  handleReversedMsg() {
    return this.msg.split('').reverse().join('')
}

watch

• 监听data的属性变化

• 监听路由的变化处理对应的逻辑，也可以在这发起ajax请求

<input type="text" v-model="value1">
<input type="text" v-model="value2">
<input type="text" v-model="obj.key">

  data() {
    return {
      value1: '',
      value2: 'hello',
      obj: {
        key: 'object'
      }
    }
  },
  watch: {
    // 第一个参数是新值，第二个参数是旧值
    value1(newVal,oldVal) {
      if(newVal !== oldVal) {
        console.log('数据更新了')
      }
    },
    // 下面添加immediate将会在生命周期`beforeCreate`和`created`之间打印:'我会打印value2的初始值:hello'
    value2: {
      handler: function(val) {
         console.log(`我会打印value2的初始值:${val}`) 
      },
      immediate: true
    },
    // 对象属性的监听,下面的添加deep后会把obj的所有属性变化都监听
    obj: {
      handler: function(val) {
         console.log(`我有点浪费性能:${val.key}`) 
      },
      deep: true
    },
    // 下面这样写只会监听到obj对象的key属性的变化
    'obj.key': {
      handler: function(val) {
         console.log(`obj.key数据更新了:${val.key}`) 
      },
    }
  },

过滤器

<!--在bind和双大括号语法使用过滤器-->
<a :href="url | urlFormat">{{ msg | msgFormat | msgFormat2('参数1', '参数2') }}</a>
<!-- 过滤器写法 结果是<div class="success"></div>-->
<div :class="statusClass | statusFilter"></div>
<!-- 不使用过滤器写法 和上面的结果是一样的-->
<div :class="statusMap[statusClass]"></div>

// 全局过滤器
Vue.filter('urlFormat',function(url) {
    return url.replace(/baidu/g,'google')
}
// 组件私人过滤器
filters: {
    msgFormat(msg) {
      return msg.replace(/百度/g,'谷歌')
    },
    // msg是执行完msgFormat(msg)返回的结果
    msgFormat2(msg,arg1,arg2) {
      return msg+arg1+arg2
    },
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        deleted: 'error',
      }
      return statusMap[status]
    }
},
data:{
    url: 'https://baidu.com',
    msg: '我是百度',
    statusClass: 'published',
    statusMap: {
      published: 'success',
      deleted: 'error',
    }
},