过滤器 侦听器和计算属性

过滤器

过滤器的注意点

1.要定义到filters节点下 本质是一个函数

2.在过滤器函数中 一定要有return值

3.在过滤器的形参中 就可以获取到管道符前面 待处理的那个值

4.如果全局过滤器和私有过滤器的名字一致 此时按照就近原则 调用的是私有过滤器

       <p>message的值为: {{messgae | capi}} </p>
       
       
        // 使用Vue.filter() 定义全局过滤器
        Vue.filter('capi', function (str) {
            const first = str.charAt(0).toUpperCase()
            const other = str.slice(1)
            return first + other + '~~~~'
        })

    data: {
                messgae: 'hello vue.js'
          },
    filters: {
                // 注意 过滤器函数形参中 val 永远都是“管道符” 前面的那个值
                capi(val) {
                    // 字符串有charAt方法 这个方法接收索引值 表示从字符串中把对应的字符 获取出来
                    // val.vharAt(0)
                    const first = val.charAt(0).toUpperCase();
                    // 字符串的slice方法 可以截取字符串 从指定索引往后截取
                    const other = val.slice(1)

                    // console.log(val);
                    // 强调 过滤器中 一定要有一个返回值
                    return first + other2
                }
            }

watch侦听器

1.方法格式的侦听器

• 缺点1：无法在刚进入页面的时候自动触发
• 缺点2：如果侦听的是一个对象 如果对象中的属性发生了变化 不会触发侦听器

 watch: {
                // 监听username的值
                // newVal是“变化后的新值” oldVal是变化前的旧值
                // 侦听器本质是一个函数 要监视哪个数据变化 就把数据名作为方法即可
                // 新值在前 旧值在后
                username(newVal) {
                    // 1.调用jQuery中的Ajax请求 判断 newVal 是否被占用
                    if (newVal === '') return
                    $.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
                        console.log(result)
                    })

                    // console.log(newVal, oldVal);
                }
            }

2.对象格式的侦听器

• 好处1：可以通过immediate选项 让侦听器自动触发一次
• 好处2：可以通过deep选项 让侦听器深度监听对象中每个属性的变化

watch: {
                // 定义对象格式的侦听器
                username: {
                    // 侦听器的处理函数
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                    },
                    // immediate 选项的默认值是 false
                    // immediate 的作用是 控制侦听器是否自动触发
                    immediate: true,
                    
                    //info 侦听的对象
                    info: {
                    handler(newVal) {
                         console.log(newVal);
                },
                   // 开启深度监听 只要对象中任何一个属性发生变化了 都会触发 对象侦听器
                    deep: true
                }
                // 如果侦听的是对象的子属性的变化 则必须包裹一层单引号
                'info.username'(newVal) {
                    console.log(newVal);
                }
                }
            }

计算属性

特点 ：

• 定义的时候要被定义为方法
• 在使用计算属性的时候 当普通的属性使用即可 好处：
• 实现了代码的复用
• 只要计算属性中依赖的数据源变化了 则计算属性会自动重新求值

// 所有的计算属性都要定义到 computed 节点之下
            // 计算属性 在定义的时候要定义成方法格式
            computed: {
                // rgb 作为一个计算属性 被定义成了方法格式 
                // 最终 在这个方法中 要返回一个生成好的 rgb(x,x,x)的字符串
                rgb() {
                    return `rgb(${this.r},${this.g},${this.b})`
                }
            }