一起从零开始学VUE（3）过滤器和侦听器的使用

过滤器

基本用法

过滤器常用于文本的格式化，可以和v-bind属性绑定，被添加在js的尾部，由“管道符”进行调用，只能用于Vue 2.0 中。

例如：<p>message 的值是 {{ message | capitalize}}</p>利用管道符，调用capitalize过滤器对管道符前的参数的内容进行格式化

• 过滤器本质上是个函数，必须被定义到filters节点之下
• 过滤器中一定要有一个返回值
• 过滤器函数形参中的val是管道符前面的值

<div id="app">
    <p>message 的值是 {{ message | capitalize}}</p>
</div>
<script src="./lib/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            message: "hello,vue"
        },
        filters:{
            capitalize(val){  //val是”管道符“前面的一个值
                console.log(val)
                // charAt方法接收索引值，表示将索引对应的字符截取出来
                const first = val.charAt(0).toUpperCase()
                //字符串的slice方法可以从指定索引往后截取字符串
                const other = val.slice(1)
                // 过滤器中一定要有一个返回值
                return first + other
            }
        }
    })
</script>

小贴士

在上述示例中，我们运用slice()方法来实现从指定索引往后截取字符串，在品牌列表案例中，我们用到一个splice()方法来向或从数组删除/添加项目，两个方法长得很像，我们来对它们进行区分。

1. slice(start,end) : 从已有数组中返回选定的元素，返回一个新数组
   • start是必须的，规定开始的位置。正数表示从前往后，如果为负数，则表示从后往前数，-1表示最后一个元素
   • end是可选的，如果没有指定则表示从start一直到数组结束的所有元素
   • 不改变原数组，返回一个子数组
2. splice(index , number , item1, item2 …) : 向或从数组中添加或删除项目，返回被删除的项目
   • index是必须的，规定添加或删除的位置
   • number是必须的，表示要删除的数量，如果为0则不删除项目
   • item1,item2…是可选的，向数组添加的新项目
   • 会改变原数组，返回被删除的项目

**区别：**slice()常用于字符串的切割，splice()用于删除数组中的一段元素

**联想：**substr(start,num) 和 substring(start,end) 是两个经常被用来截取字符串的方法

私有过滤器和全局过滤器

私有过滤器：在filters节点下定义的过滤器，只能在当前vm实例控制的el区域内使用

全局过滤器：使用Vue.filter( name , function)来定义，独立于每个vm实例之外，能在多个vue实例中共享

• 如果全局过滤器和私有过滤器同名，则按照就近原则，调用私有过滤器

<div id="app">
    <p>message 的值是 {{ message | capitalize}}</p>
</div>
<div id="app2">
    <p>message 的值是 {{ message | capitalize}}</p>
</div>
<script src="./lib/vue.js"></script>
<script>
    //使用Vue.filter()定义全局过滤器
    Vue.filter('capitalize',function(str){
        const first = str.charAt(0).toUpperCase()
        const other = str.slice(1)
        //私有和全局同名，就近原则，优先使用私有
        return first + other+' ------'
    })

    const vm = new Vue({
        el:"#app",
        data:{
            message: "hello,vue"
        },
        filters:{
            capitalize(val){  //val是”管道符“前面的一个值
                console.log(val)
                // charAt方法接收索引值，表示将索引对应的字符截取出来
                const first = val.charAt(0).toUpperCase()
                //字符串的slice方法可以截取从指定索引往后截取字符串
                const other = val.slice(1)
                // 过滤器中一定要有一个返回值
                return first + other
            }
        }
    })
    const vm2 = new Vue({
        el:'#app2',
        data:{
            message:"vue.js hello message2"
        }
    })
</script>

过滤器的其他用法

1. 连续调用多个过滤器：{{message | filterA | filterB}} 最终返回的是filterB处理的结果

2. 由于过滤器的本质是js函数，因此可以接收参数：{{message | filterA(arg1,arg2)}}

3. 过滤器处理函数的形参列表中：

• 第一个参数永远都是“管道符”前面待处理的值
• 从第二个参数开始，才是调用过滤器时的参数

如：Vue.filter('filterA',(msg,arg1,arg2) =>{.....})

侦听器

基本用法

watch侦听器是用来监视数据变化，从而对数据的变化做特定的操作，数据的变化会自动触发侦听器。

• 所有的侦听器被定义在watch节点下

• 侦听器本质上是一个函数，要监视哪个数据的变化将该数据名作为方法名即可

• 可以传入形参，新值在前，旧值在后

<div id="app">
    <input type="text" v-model.lazy="username">
</div>
<script src="./lib/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data:{
            username: "" 
        },
        watch:{
            username(newVal , oldVal){
                console.log("username发生变化", newVal, oldVal)
            }
        }
    })
</script>

侦听器的格式

1. 方法格式的侦听器
   • 缺点1：无法在刚进入网页的时候就自动触发，要等到数据变化才触发
   • 缺点2：如果侦听的是一个对象，若对象中的属性发生变化，并不会触发侦听器
2. 对象格式的侦听器
   • 优点1：可以通过immediate选项，让侦听器自动触发
   • 优点2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化

优点1：immediate选项

方法格式的侦听器	对象格式的侦听器

优点2：deep选项——开启深度监听，只要对象中任何一个属性变化，都会触发对象的侦听器

方法格式的侦听器	对象格式的侦听器

实现对象的子属性变化的侦听

使用这种方法时要注意，如果侦听的时对象的子属性的变化，则必须包裹一层单引号

watch:{
    'info.username'(newVal,oldVal){
        console.log(newVal,oldVal)
    }
}

对象格式的侦听器的语法总结

// 对象格式的侦听器
username:{
    handler(newVal, oldVal){
        ......
    },
//immediate的作用是：控制侦听器是否自动触发一次，默认值是false
        immediate:true,
//deep的作用是：开启深度监听，只要对象任何一个属性变化了，都会触发对象的侦听器
        deep:true
}