Vue学习之过滤器、侦听器、计算属性

过滤器的基本使用

vue的实例化

const vm = new Vue({
    el: '#app',
    data: {
    message: 'hello vue.js'
    }
})

vue控制区域

<div id="app">
    <!-- '|'管道符 -->
    <p>message的值是：{{message | capi}}</p>
</div>

添加filters

filters: {
    capi(val) {
    // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符串，获取出来
    const first = val.charAt(0).toUpperCase();
    // 字符串中的 slice 方法，可以截取字符串，从指定索引开始往后截取  substr方法同理
    const other = val.slice(1);
    // 强调：过滤器中，一定要有一个返回值
    return first + other;
    }
}

过滤器的注意点

1. 要定义到 filters(与el、data等属性平级) 节点下，其本质是一个函数
2. 在过滤器函数中，一定要有 return 值
3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值

定义一个全局过滤器（所有控制域都可以调用）

 // 使用 Vue.filter 定义一个全局过滤器
 //第一个参数是过滤器名称
 //第二个参数是过滤器函数
Vue.filter('capi', (val) => {
    const first = val.charAt(0).toUpperCase();
    const other = val.slice(1);
    return first + other+'~~';
})

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

另：代码遵循从上往下执行的顺序，所以全局过滤器放在整个script的最前面，否则容易报错。

侦听器

• watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

侦听器的格式

1.方法格式的侦听器

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

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

2.对象格式的侦听器

• 好处1：可以通过 immediate 选项，让侦听器自动触发！

watch: {
    // 定义对象格式的侦听器
    username: {
    // 侦听器的处理函数
    handler(newVal, oldVal) {
    console.log(newVal, oldVal);
    },
    // immediate 选项的默认值是false
    // immediate 的作用是：控制侦听器自动触发一次
    immediate: true
    }
}

• 好处2：可以通过 deep选项，让侦听器深度监听对象中每个属性的变化！

el: '#app',
data: {
    // 用户的信息对象
    info: {
    username: ''
    }
},
watch: {
    info: {
    handler(newVal) {
    console.log(newVal);
    },
    // 开启深度侦听，只要对象中任何一个属性变化了，都会触发'对象的侦听器'
    deep: true
    }
}

侦听一个对象子属性的变化

watch: {
     // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
    'info.username'(newVal){
     console.log(newVal);                   
    }
}

计算属性

定义：

computed: {
    // rgb作为一个计算属性，被定义成了方法格式
    // 最终在这个方法中，要返回一个rgb(x,x,x)字符串
    rgb() {
    return `rgb(${this.r}, ${this.g}, ${this.b})`
    }
}

 调用

<!-- 专门用户呈现颜色的 div 盒子 -->
<!-- 在属性身上，:代表 v-bind: 属性绑定 -->
<!-- style="{}" JavaScript代码  表示一个样式对象 -->
<!-- ${} 占位符 -->
<div class="box" :style="{ backgroundColor:rgb}">
      {{ rgb }}
</div>

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