vue 自定义全局和私有筛选器 以及 自定义全局和私有指令

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/enjoy_sun_moon/article/details/88790241

全局筛选器  举例
/*过滤函数的第一个参数是默认传来的数据，第二个可以是自定义的值*/
<div>{{info | msgFormate('大寄吧') | msgtest('===')}}</div>
vue.filter('name',function(data,msg){
    return data.replace(/淡出/g,msg)  //正则
})
vue.filter({'msgtest',function(data,msg){
    return data+msg
})


//私有筛选器
new Vue({
	el:'#app',
	data:{

	},
	methods:{

	},
        filters:{
            'msgtest':function(data,msg){     
             }        
        }
})

全局指令

全局指令第一个参数是指令名称 不需要写v-,但是在回调的时候一定要加上v-
Vue.direction('focus',{
    bind:function(el,binding){

        }
})

私有变量
//私有筛选器
new Vue({
	el:'#app',
	data:{

	},
	methods:{

	},
        filter:{
            'msgtest':function(data,msg){     
             }        
        },
        directives:{
            'focus':{
                        bind:function(el,binding){ //binding是值
                            el.style.fontWeight=binding.value
                        }
                    }
        }
})

参数1：指令的名称，指令在调用的时候必须在指令名的前面加上v-。

参数2：是一个对象，在这个对象有一些指令相关的函数，这些函数在特定的阶段执行相关的操作

          bind:每当指令绑定到元素上的时候时就执行此操作，   只触发一次

          注意在每个函数中第一个参数永远都是el，表示被绑定指令的那个元素本身，是一个原生的JS对象

         在元素刚刚绑定指令的时候，元素还没有插入到dom中去，这时候调用focus（）没有作用

         inserted：当元素插入到dom中去的时候 会执行inserted函数       触发一次

         updated：当元素更新或修改的时候 会执行updated操作             触发多长