vue 过滤器和自定义指令的使用

过滤器

01. 是什么

过滤器可以对我们传入的数据进行必要的处理，并返回处理的结果

• 过滤器不会修改数据
• 过滤器的本质是函数
• 过滤器函数应该有参数，参数必须包含你想进行处理的源数据
• 过滤器应该有返回值，返回处理后的结果

02. 怎么做

（1）定义过滤器

• 局部过滤器：定义在组件内部，只能在当前组件内使用

通过filters结构来创建

• 全局过滤器：通过vue.filter创建全局过滤器，一次只能创建一个，可以在任何组件中使用

需要在vue实例创建之前定义

在单独的文件中创建一个全局过滤器
在需要用到的组件中引入，并在filters中注册

（2）使用方式

• 在插值表达式{{}}中，或者v-bind表达式中，通过管道操作符——|来使用过滤器
• 格式：{{ 源数据 | 过滤器 }}

• 多次使用

过滤器支持多个并行使用，前者的处理结果，将作为后者的参数传入

（3）过滤器的参数

• 如果没有手动传递参数，那么默认就会传递管道符前面的数据
• 如果手动的传递了参数，也不会影响默认参数的传递
  • 过滤器函数的第一个参数永远是管道符前面的数据
  • 而手动传递的参数，从参数列表的第二个开始，依次向后
    

03. 封装过滤器函数

• 过滤器的本质就是一个函数，所以可以在一个单文件中直接封装一个过滤器函数

• 然后再需要的组件内引入函数，并注册为过滤器

自定义指令

01. 是什么

• 要对普通 dom 元素进行底层操作，这时候就会用到自定义指令
  • 也就是说自定义指令主要是对 dom 元素进行操作
    

02. 基本概念

（1）钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化事件
• inserted：当被绑定的元素插入父节点时调用 ，只要父节点存在即可，即使它没有插入文档中
• update：当被绑定元素所在组件更新时调用，无论绑定的值是否发生变化都会调用。但可以通过比较更新前后的值，来忽略不必要的模板更新
• componentupdated：当被绑定元素所在组件的全部更新后，即完成一次更新周期时调用
• unbind：只调用一次，指令与元素解绑时调用
  

（2）参数

指令钩子函数会被传入以下参数:

• el：指令所绑定的元素，可以用来直接操作 dom，即放置指令的那个元素
• binding：一个对象，里面包含多个属性
  • name：指令名，没有v-前缀
  • value：指令绑定的值，可以绑定一个对象以传递多个值
  • oldvalue：指令绑定的旧值，禁止update和componentupdated钩子中可用，无论值是否改变
  • expression：字符串形式的指令表达式
  • arg：传递给指令的参数
  • modifiers：一个包含修饰符的对象
• vnode：vue 编译生成的虚拟节点
• oldvnode：上一个虚拟节点，仅在 update 和 componentupdated 钩子中可用

03. 指令注册

（1）全局注册

通过 vue.directive() 方式注册全局指令，包含两个参数：

• 第一个参数为自定义指令名称，指令名称不需要加 v- 前缀，默认是自动加上前缀的，在使用指令的时候加上前缀即可
• 第二个参数可以是对象数据，也可以是一个指令函数

（2）局部注册

通过在vue实例中添加 directives 对象数据注册局部自定义指令

以上就是vue 过滤器和自定义指令的使用的详细内容，更多关于vue 过滤器和自定义指令的资料请关注其它相关文章！