自定义指令补充

自定义指令通过钩子函数的形式来实现自定义的功能

这里是几个常用的钩子函数以及它的方法：
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用
update：所在的组件的VNode更新时调用，指令的值可能发生了改变，也可能没有。
componentUpated：指令所在组件的VNode及其子VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用。

自定义过滤器

过滤器用来对Vue中的属性或者数据进行过滤，即在显示之前进行数据处理或筛选。
过滤器可以用在两个地方：双花括号差值和v-bind表达式

过滤器的语法如下：

{{data|filter(参数)}}

data时filter的第一个参数（隐性参数），而括号中的参数是指第二个以后的参数。

过滤器的用法如下：

//双花括号形式
{{message|capitalize}}
//v-bind形式
 <div v-bind:id="rawId|formatId"></div>

为什么叫自定义过滤器？

因为Vue2.0以后删除了所有内置过滤器

自定义全局过滤器

使用全局方法Vue.filter可自定义全局过滤器。所谓全局方法就是在多个实例中都可以使用。比如，再定义一个vue实例，在这个示例挂载的元素中也可以使用。

对于过滤器执行的函数，一般建议用箭头函数来表示。


<body>
    <div id="app">
        <h3>{{8|addZero}}</h3>
        <h3 v-bind:id="3|addZero">1</h3>
    </div>
    <script>
        //自定义过滤器，当数字为1位数字时，在前面加个0
        //过滤器执行的函数的第一个参数data就表示要过滤处理的数据，过滤器的名称
        Vue.filter('addZero', (data) => {
            //data参数是 | 前面的数据
            return data < 10 ? "0" + data : data;
        })
        const vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

注意：过滤器要先定义，然后再new Vue（）实例，否则会失效且报错（也就是过滤器要写在new Vue（）前面）

自定义局部过滤器

局部过滤器就是写在实例内部，通过filter选项设置，只能应用在对应的Vue实例挂载的DOM上。


<body>
    <div id="app">
        <h3>{{currentDate|filterNum(3)}}</h3>
        <h3 v-bind:id="3|addZero">1</h3>
    </div>
    <script>

        const vm = new Vue({
            el: '#app',
            data: {
                currentDate: Date.now(),

            },
            filters: {
                //局部过滤器
                filterNum: (data, n) => {
                    return data.toFixed(n)
                },
                addZero: function (data) {
                    return data < 10 ? "0" + data : "data"
                }
            }
        })
    </script>
</body>