Vue's filters and custom directives

filter filter

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

Page effect:

The filter defined above is defined in a single vue instance, which is a local filter and can only be used in the vue instance that currently defines the filter; if there are multiple vue instances in the page, other vue instances will speak Can't call the filter just defined

Define the second instance vms in the page,


and call the filter defined in the vm instance in the vms instance to see what effect it has.


The page shows that the three filters defined in vm cannot be parsed.
At this time, you want to use multiple filters. Both can share filters need to define a global filter

Custom instruction directives

first way of writing

The second way of writing:

Summary
Definition syntax:
(1) Local directives and global directives, the format of the global and local directives is basically the same as that of the filter definition here, and the global directives are not shown
locally here: new Vue({directives:{directive name: configuration object }}) or new Vue({directives(){}})
global: Vue.directive(directive, configuration object)
3 callbacks commonly used in configuration objects
(1) bind Called when the directive is successfully bound to the element
(2) Called when the element where the inserted instruction is located is inserted into the page
(3) Called when the template structure where the update instruction is located is re-parsed
Note
(1) The instruction definition does not add v- when it is used in a tag.
(2) If the instruction is multiple words Use the kebab-case naming method (that is, use - between two words) Do not use camelCase naming (hump naming)