过滤器与自定义属性

过滤器

1. 使用语法

   {{变量 | 过滤器名}}
   {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，
   后面过滤器的data就是前面表达式传过来的值

        <div>{{msg }}</div>
        <div>全局过滤器</div>
        <div>{{msg | document1(999)}}</div>
        <div>局部过滤器</div>
        <div>{{msg | document2(999)}}</div>

2. 定义语法

全局定义：

通过Vue提供的filter方法定义：Vue.filter()
参数：过滤器的名字或过滤器执行函数

Vue.filter('document1', (data, format) => {
        console.log(data, format);
        return data.replace('好人', '**');
    })
    

私有定义
filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

data:{}，
methods:{}，
filters: {
            document2(data, format) {
                console.log(data, format);
                return data + format
            }
        }

自定义指令

1. 使用语法

        <input type="text" v-focus>
        <p v-color="color">我来了</p>

2. 全局定义

使用这个方法进行全局定义：Vue.directive()
参数：

a. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
b.对象，里面包含三个钩子方法

1. bind
   只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

2. inserted 这个元素已经渲染到界面上之后执行。

3. update 当元素有更新的时候执行 这三个方法的参数有哪些 ：
   el：指令所绑定的元素，可以用来直接操作 DOM 。
   binding：一个对象，包含以下属性：
   name：指令名，不包括 v- 前缀。
   value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为
   oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

 Vue.directive('focus', {
        bind(el, binding) {
            console.log(el);
            console.log(binding);

            // el.focus();
        },
        inserted(el, binding) {
            el.focus();
        },
        updated(el, binding) {

        },
    })

3. 私有定义

   实例里有个directives属性，这个属性是个对象
   里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
   简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

 data:{}，
 methods:{}，
 directives: {
            /*局部指令*/
            color(el, binding) {
                el.style.color = binding.value;
            },
            bind(el, binding) {
                console.log(el);
                console.log(binding);


            },
            inserted(el, binding) {

            },
            updated(el, binding) {

            },
        },