1. 过滤器

1.1基本用法

过滤器应该被添加在 Javascript 表达式的尾部，由管道符 |进行调用：

在花括号中通过|调用过滤器，对值进行格式化
```
<p>message: {{ message | capi }} </p>
```

capi 过滤器的定义

定义在 filters 下，本质是一个函数
在过滤器的参数中，一定要有 return 值
在过滤器的形参中，就可以获得 | 前的待处理值

const vm = new Vue({
    el: '#app',
    data: {
    	message: 'hello Vue !'
    },
    // 定义过滤器函数
    filters:{
        capi(val) {
            // val 过滤器前面的形参 | 前面的值
            // charAt 接收索引值 将对应字符返回

            const first = val.charAt(0).toUpperCase()
            const other = val.slice(1)
            return first + other
        }
    }
})

1.2私有过滤器和全局过滤器

在 filters 节点定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

全局定义放在 vm 实例之前
优先使用 vm 实例的 filters 中的过滤器
如果 vm 实例的 filters 没有相关过滤器，则使用全局过滤器
私有和全局都没有则使用原型

// Vue.filter() 方法接收两个参数：
// 第一个参数：全局过滤器的名字
// 第二个参数：全局过滤器处理函数
Vue.filter('capi' , (val) => {
    const first = val.charAt(0).toUpperCase()
    const other = val.slice(1)
    return first + other
})

1.3 Dayjs

<td>{{ item.time | dataFormat}} </td>

// 声明格式化时间的全局过滤器
Vue.filter('dataFormat' , (time) => {
    // YYYY-MM-DD HH:mm:ss
    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');  
})

1.4 连续调用多个过滤器

过滤器可以串联进行调用：

{{ message | filterA |  filterB |filterC }}

1.5 过滤器传参

过滤器本质是 JavaScript 函数，因此可以接受参数：

{{ message | filterA(arg1 , arg2)}}

Vue.filter('filterA' , (msg , arg1 , arg2) => {
    // code...
})

1.6 兼容性

2. watch 侦听器

2.1 简介

const vm = new Vue({
    el: '#app',
    data: {
        message: 'hello Vue !'
    },
    // 定义侦听器
    // 要监听哪个数据的变化就把这个数据作为方法名即可
    watch: {
        message(newMes , oldMes){
            console.log(newMes , oldMes)
        }
    }
})

2.2 应用场景：判断用户名是否被占用

<body>
    <div id="app">
        <input type="text" name="" id="" v-model="username"><span>{{ message}}</span>
    </div>

    <script src="./lib/vue.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        // Vue.filter() 方法接收两个参数：
        // 第一个参数：全局过滤器的名字
        // 第二个参数：全局过滤器处理函数
        Vue.filter('capi' , (val) => {
            const first = val.charAt(0).toUpperCase()
                    const other = val.slice(1)
                    return '123'
        })
        // 创建 vue 实例对象
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'zhangsan',
                message: ''
            },
            // 定义侦听器
            // 要监听哪个数据的变化就把这个数据作为方法名即可
            watch: {
                username(newName , oldName){
                    $.get('https://www.escook.cn/api/finduser/' + newName , function(result){
                        vm.message = result.message
                        console.log(result)
                    })
                }
            }
        })
        
    </script>
</body>

2.3 immediate 选项

方法格式的侦听器
- 缺点1：无法在刚进入页面的时候自动触发
- 缺点2：如果侦听的是一个对象，对象属性值的变化不会触发侦听器！
对象格式的侦听器
- 好处1：可以通过 immediate 选项，让侦听器自动触发
- 好处2：可以通过 deep 选项监听对象中每个属性的变化

watch: {
    // 定义对象格式的侦听器
    username: {
        //  handler 侦听器处理函数
        handler(newName , oldName) {
            $.get('https://www.escook.cn/api/finduser/' + newName , function(result){
                vm.message = result.message
                console.log(result)
            })
        },
            // immediate 为 true 自动触发一次，默认为 false
            immediate: true
    }
}

2.4 deep 选项

对象格式的侦听器：可以通过 deep 选项监听对象中每个属性的变化
如果要监听的是对象的子属性的变化，则需要加上单引号：info.username() {...}

<div id="app">
    <input type="text" name="" id="" v-model="info.username"><span>{{ message}}</span>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        },
        message: ''
    },
    // 定义侦听器
    // 要监听哪个数据的变化就把这个数据作为方法名即可
    watch: {
        info: {
            //  handler 侦听器处理函数
            handler(newObj , oldObj) {
                $.get('https://www.escook.cn/api/finduser/' + newObj.username , function(result){
                    vm.message = result.message
                    console.log(result)
                })
            },
            // immediate 为 true 自动触发一次，默认为 false
            immediate: true,
            // 开启深度监听 默认为 false
            deep: true
        }
    }
})

3.计算属性

3.1 了解计算属性应用场景

所有的计算属性都定义在 computed 节点下
计算属性要定义成方法形式
当使用计算属性时当做 vm 的属性使用即可

computed:{
    // 返回生成好的 rgb(x,x,x) 字符串
    rgb() {
        return `rgb(${this.r},${this.g},${this.b})`
    }
}

3.2 控制 div 背景颜色案例

好处：

实现了代码复用
只要依赖的数据源发生变化，计算属性重新求值

<style>
    #app{
        margin: 100px;
    }
    .box{
        width: 200px;
        height: 200px;
    }
</style>

<div id="app">
    <p>r：<input type="text" v-model.number="r"> </p>
    <p>g：<input type="text" v-model.number="g"> </p>
    <p>b：<input type="text" v-model.number="b"> </p>
    <div class="box" :style="{ backgroundColor:rgb}">
        {{  rgb }}
    </div>
    <button @click="show">按钮</button>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        r: 0,
        g: 0,
        b: 0
    },
    computed:{
        // 返回生成好的 rgb(x,x,x) 字符串
        rgb() {
            return `rgb(${this.r},${this.g},${this.b})`
        }
    },
    methods: {
        // 点击按钮 在终端显示颜色
        show() {
            console.log(this.rgb)
        }
    }
})