Vue的过滤器和自定义指令

过滤器filter

   定义 : 对要显示的数据进行特定格式化后再显示
    (使用于一些简单逻辑的处理,比如金额,手机号掩码,时间格式转换等)
    语法:
        1 注册过滤器: 全局过滤器Vue.filter(name,callback(){}) 
        或局部过滤器(当前实例定义的过滤器只能当前实例使用) new Vue(filters:{})
    注意:
        1 过滤器也可以接受额外参数 多个过滤器之间也可以相互串联
        2 过滤器并没有改变原本的数据 只是产生新的对应的数据展示

页面效果:

上面定义的过滤器是在单个vue的实例中定义的,属于局局部的过滤器,只能在当前定义过滤器的vue实例中使用;如果页面中有多个vue实例的话,其他vue实例就讲不能那调用刚才定义的过滤器

在页面中定义第二个实例vms


在vms实例中调用刚才在vm实例中定义的过滤器看看有什么效果


页面显示无法解析在vm中定义的三个过滤器
此时要想让多个过滤器都可以共用过滤器需要定义全局过滤器

自定义指令directives

第一种写法

第二种写法:

总结
定义语法:
(1) 局部指令和全局指令,此处和过滤器的定义全局和局部指令的格式基本一致,此处全局指令不做演示
局部: new Vue({directives:{指令名:配置对象}}) 或 new Vue({directives(){}})
全局: Vue.directive(指令民,配置对象)
配置对象中常用的3个回调
(1) bind 指令与元素成功绑定时调用
(2) inserted 指令所在元素被插入页面时调用
(3) update 指令所在模板结构被重新解析时调用
注意
(1) 指令定义不加v- 在标签中使用时需要加v-
(2) 指令如果是多个单词 要使用kebab-case命名方式(就是两个单词之间用-连接) 不要用camelCase命名(驼峰命名)