class08：过滤器

一、过滤器

文档说明：过滤器 — Vue.js (vuejs.org)

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

1. filters

filters不是必须使用的内容，使用computed，methods都可以完成。

定义: 对要显示的数据进行特定格式化后再显示(用于一些简单逻辑)。
过滤器可以接收额外的参数，多个过滤器也可以进行串联。并没有改变原数据，产生了一个新的数据。不单只能修改插值符，还可以修改v-bind 。

new Vue({ filters:{ 局部注册 }})

全局注册
Vue.filter()

例： 将时间戳转化为日常格式。

<div id="root">
    <h2>开始</h2>
    <p>现在是：{{time}} </p>
    <hr>
    <p>现在是：{{time}} ---- computed</p>
    <hr>
    <p>现在是：{{timeFun()}} ---- methods</p>
    <hr>

    <!-- filters通过管道符 | -->
    <!--      源数据 |  -->
    <p>现在是：{{time | dateFilt}} ---- filters</p>
    <hr>
    <p>现在是：{{time | dateFilt | slicedate}} ---- filters</p>

    <hr>
    <p>现在是：{{time | aa('YYYY$MM$DD')}} ---- aa1使用$</p>
    <p>现在是：{{time | aa('YYYY￥MM￥DD')}} ---- aa2使用￥</p>


    <div :ss="str | slicedate"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>

let vm = new Vue({
    el: "#root",
    data() {
        return {
            time: Date.now(),
            str:"123456789"
        }
    },

    computed: {
        getTime() {
            return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss');
        }
    },

    methods: {
        timeFun() {
            return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss');
        }
    },
    
    //过滤属性
    filters: {
        // 默认接收原数据的值
        dateFilt(val) {
            console.log("dateFilt:", arguments);
            // 返回值 覆盖原数据 页面显示过滤函数的返回值
            return dayjs(val).format('YYYY年MM月DD HH:mm:ss');
        },

        slicedate(val) {
            console.log("slicedate:", arguments);
            return val.slice(5)
        },

        aa(val, key) {
            console.log("val, key", val, key);
            return dayjs(val).format(key);
        }

    }

})

2. 全局注册与局部注册

<style>
    #box {
        height: 200px;
        background-color: green;
    }

    #app {
        margin-top: 20px;
        height: 200px;
        background-color: blue;
    }
</style>

<div id="box">
    组件1-----------{{name | changeName}}
</div>

<div id="app">
    组件2------------{{name | changeName}}
</div>

// 全局注册
Vue.filter("changeName", function (val) {
    return val + "global";
})

// 局部注册
// 组件1
new Vue({
    el: "#box",
    data() {
        return {
            name: "尤雨溪",
        }
    },
    filters: {
        changeName1(val) {
            return val + "aaa";
        }
    }
})

// 组件2
new Vue({
    el: "#app",
    data() {
        return {
            name: "任正非"
        }
    },
    filters: {
        changeName2(val) {
            return val + "bbb";
        }
    }
})

总结：

全局在vue组件任何位置都可以使用；
局部只能在当前vue组件中使用；
组件1 不能使用组件2的filters；
组件2 不能使用组件1的filters。

3. 重新渲染

来看一段代码：

<div id="root">
    {{name}}
    <hr>
    {{fun1}}---{{fun2()}}
</div>

// 重新渲染
let vm = new Vue({
    el:"#root",
    data(){
        return {
            name:"尤雨溪",
        }
    },

    computed:{
        fun1(){
            console.log("fun1");
            return "fun1:123";
        }
    },
    methods:{
        fun2(){
            console.log("fun2");
            return "fun2:456";
        },
        fun3(){
            console.log("fun3");
            return "fun3:789";
        }
    }
})

总结：

可以看到，页面第一次渲染时，执行了fun1和fun2函数方法，当修改数据name之后又执行了fun2方法。

所以页面中data数据更新时，Vue会重新渲染模板，重新获取模板中的数据，重新执行模板中的方法。