vue--过滤器---自定义指令

一.vue–过滤器

过滤器：可改变数据，通过过滤器改变一段数据或者文本中的某一段文本
Vue.filter()----全局过滤器
new Vue({----局部过滤器
filters:{
“过滤器名称”:function(){…}
}
})
当局部和全局存在相同的过滤器时，采用就近原则

 全局过滤器：filter方法
                -----Vue.filter('过滤器的名字'，function(msg){
                    ...
                    return msg(要过滤的数据).replace(可通过正则表达式过滤)
                })
                function("管道符| 前的数据")
            使用过滤器的：{{数据 | 过滤器的名字}}
                ----<h1>{{message | format}}
            
            带参数的过滤器
               ----<h1>{{message | format('参数为function中的arg2')}}
             -----Vue.filter('过滤器的名字'，function(msg,arg2，arg3){
                    ...
                    return msg(要过滤的数据).replace(可通过正则表达式过滤,)
                      return msg.replace(/hello/g,arg2+arg3);
                })
                function("管道符| 前的数据")

            局部过滤器：filters:{}方法,
                只有在Vue中指定的区域有效
               let vm=new Vue({
                    el:"#app",
                    data:{
                        message:"hello world",
                    },
                    methods:{},
                      filters:{...}
                })

二.自定义指令

自定义添加 ‘v-’指令
Vue.directive（‘指令名称’，{--------自定义全局指令
bind:{…},
inserted:{…}
}）
new Vue({----局部过滤器
directives:{
“指令名称”:function(el,binding ){…}
}
})

全局自定义指令：
            新增v-focus指令
            Vue.directive('focus',{
                ...钩子函数
                bind:function(el){
                    ...只调用一次，指令第一次绑定到元素时调用,进行初始化
                }
                inserted:{
                    el.focus();
                    ...被绑定元素插入父节点时调用，只能保证父节点存在，指令已经挂在DOM中
                }
            })
            新增v-color指令
               Vue.directive('focus',{
                    ...钩子函数
                    bind:function(el){
                        ...只调用一次，指令第一次绑定到元素时调用,进行初始化
                        console.log(binding.name); //打印结果：color
                        console.log(binding.value); //打印结果：green
                        console.log(binding.expression);  //'green'

                        el.style.color = binding.value// 通过bining拿到v-color中传递过来的值
                    }
                    inserted:function(el){
                        和JS行为有关的操作，最好在 inserted 中去执行，防止 JS行为不生效
                        ...被绑定元素插入父节点时调用，只能保证父节点存在，指令已经挂在DOM中
                    }
                })
                html代码中： <input type="text" id="search" v-model="name" v-color="'green'">
                ----上方代码中,bind方法里传递的第二个参数binding，可以拿到DOM元素中v-color里填的值。
                ----注意，v-color="'green'"，这里面写的是字符串常量；如果去掉单引号，就成了变量，不是我们想要的。

            简写方式：
                    Vue.directive('color', function (el, binding) { 
                        //注意，这个function等同于把代码写到了 bind 和 update 中去
                        el.style.color = binding.value
                    })

局部自定义指令：
 directives:{
                'fontsize':{
                    inserted:function(el,binding){
                        el.style.fontSize=binding.value;
                    }
                },
                'focus':{
                    inserted:function(el){
                        el.focus();
                    }
                }
            }