VUE过滤器和指令以及binding

VUE过滤器

filter 过滤器，分为全局和局部； 过滤后的值 要 return 返回;

全局过滤器

全局： Vue.filter(‘过滤器名字’,function(值(要过滤的内容, 过滤器的参数){过滤器要实现的方法}))
局部： 在vue根内部， filters : {过滤器的名字 : function(data(内容), 参数 = ‘’){过滤器要实现的方法}}
如果全局和局部 过滤器 名称一致， 就近原则；

<div id="app">
        {{ time | dataTime }}
        <p v-col="'skyblue'">全局指令</p>
        <input type="text" v-focus @keyup.f2='alert("自定义修饰符f2")'>
        <div>{{ msg }}</div>
    </div>
    <script>
     Vue.filter('dataTime', (times) => {
            return new Date(times).toLocaleDateString();
        })
    </script>

局部过滤器

过滤器加S

 methods: {},
            // 局部过滤器;
            filters: {  
                dataTime: (times) => {
                    let showTime = new Date(times);
                    return showTime.toLocaleString();
                }
            },

VUE自定义指令

指令都是以 ‘v-’ 开头，
Vue.directive() 定义全局的指令
参数1 : 指令的名称， 注意：在定义的时候不用加 v- 前缀；
但在使用时 必需加 v- 前缀进行调用；
参数2 : 是一个对象，这个对象有一些相关的函数，这些函数可以在特定的阶段，执行相关操作；一般常用的有三个阶段

  Vue.directive('指令名',{
                    bind : function(el,binding){ 
                        // 每当 指令  绑定到元素上的的时候，会立即执行bind 这个函数 只执行一次
                        注意 : 在每个 函数中，第一个参数，永远都是 el ,表示 被绑定了指令的那个函数，这个el 参数，是一个原生的JS对象；
                        如果是添加 获取焦点事件 或  失去 焦点事件时  要注意 要等页面渲染完在执行指令   否则无效，也不会报错；
                        在元素  刚绑定了指令的时候，还没有 插入到DOM 中去，这时候调用  focus(获取焦点)  方法没作用;
                        // el.focus()  无效因为DOM元素还没插入到页面就会执行这个函数;

                        // 定义样式指令可以放在bind  样式不依赖他；

                        binding 是个对象  里面方的有  指令的名字，指令传的值，更详细的  可以打印  binding  查看；
                    },
                    inserted : function(el){ 
                        // inserted 表示元素 插入到DOM中的时候，会执行 inserted函数，只执行一次
                        el.focus();   // 获取焦点
                        el.blur();   // 失去焦点
                    },
                    updated : function(){  
                        // 当VNode(DOM 更新时) 更新的时候,会执行updated 函数，可能会执行多次 }
                });

全局指令
定义全局指令: 第一个参数是名字，第二个参数是个对象
例如：

  Vue.directive('col', {
            bind: (el, binding) => {
                // 在元素  刚绑定了指令的时候，还没有 插入到DOM 中去，这时候调用  focus(获取焦点)  方法没作用;
                console.log(el);
                console.log(binding);
                // el.style.color = 'red';
                el.style.color = binding.value;
            },
            inserted: el => {
                el.focus()
            }
        })

私有指令
directives需要加S

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

简写为

 定义私有指令： directives : { 
                指令名 : {钩子函数},

                简写：
                    指令名 : function(el,binding){ // 这个function  等同于把代码写到 bind 和 updated 里面中;
                        
                    }
            }
            

简写函数只能代替 bind 和 updated 函数里面中;一般样式都是在bind中写入

关于binding

binding是私有指令的一个参数
钩子函数有两个参数，一个是el,另一个是binding，它是一个对象，包含以下的属性

在bind中的使用方法为：