Vue(高级)【笔记】

计算属性缓存vs方法

计算属性缓存

computed: {
    reversedMessage () {
        return this.message.split('').reverse().join('')
    }
}
 
<!-- 2、使用计算属性 -->
<p>反转消息: "{{ reversedMessage }}"</p>

方法

methods:{
    reversed () {
        return this.message.split('').reverse().join('')
    }
}
 
<!-- 3、使用方法 -->
<p>反转消息: "{{ reversed() }}"</p>

计算属性基于缓存：在相关依赖发生改变时它们才会重新求值。
方法将总会再次执行

---

侦听属性

其实以下例子的方式不如计算属性

data: {
    firstName: '道格拉斯',
    lastName: '狗剩'
    fullName: '道格拉斯 狗剩' 
},
watch: {
    firstName(val){//侦听了firstName，一旦变化，就会以val传递进来
        console.log('firstName changed...')
        this.fullName = val + ' ' + this.lastName
    },

    lastName(val){
        console.log('lastName changed...')
        this.fullName = this.firstName + ' ' + val
    }
}

 
<label>名：<input type="text" v-model="firstName"></label>
<label>姓：<input type="text" v-model="lastName"></label>
{{fullName}}

局部过滤器

<td>
    <!-- | 管道符号：表示使用后面的过滤器处理前面的数据 -->
    {{item.gender | genderFilter}}
</td>

...
filters: {
    genderFilter(gender) {
        return gender === 1 ? '男' : '女'
    }
}

全局过滤器

// 在创建 Vue 实例之前全局定义过滤器：
//Vue.filter('capitalize', function (value) {
//    return value.charAt(0).toUpperCase() + value.slice(1)
//})

Vue.filter('caseFilter', value=> {
    return value.charAt(0).toUpperCase() + value.slice(1)
})
然后记得要通过管道符号进行绑定

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示