vue 过滤器和自定义指令的使用
程序员文章站
2022-03-03 09:42:05
过滤器01. 是什么过滤器可以对我们传入的数据进行必要的处理,并返回处理的结果 过滤器不会修改数据 过滤器的本质是函数 过滤器函数应该有参数,参数必须包含你想进行处理的源数据...
过滤器
01. 是什么
过滤器可以对我们传入的数据进行必要的处理,并返回处理的结果
- 过滤器不会修改数据
- 过滤器的本质是函数
- 过滤器函数应该有参数,参数必须包含你想进行处理的源数据
- 过滤器应该有返回值,返回处理后的结果
02. 怎么做
(1)定义过滤器
- 局部过滤器:定义在组件内部,只能在当前组件内使用
通过filters结构来创建
- 全局过滤器:通过vue.filter创建全局过滤器,一次只能创建一个,可以在任何组件中使用
需要在vue实例创建之前定义
在单独的文件中创建一个全局过滤器
在需要用到的组件中引入,并在filters中注册
(2)使用方式
- 在插值表达式{{}}中,或者v-bind表达式中,通过管道操作符——|来使用过滤器
- 格式:{{ 源数据 | 过滤器 }}
- 多次使用
过滤器支持多个并行使用,前者的处理结果,将作为后者的参数传入
(3)过滤器的参数
- 如果没有手动传递参数,那么默认就会传递管道符前面的数据
- 如果手动的传递了参数,也不会影响默认参数的传递
- 过滤器函数的第一个参数永远是管道符前面的数据
- 而手动传递的参数,从参数列表的第二个开始,依次向后
03. 封装过滤器函数
- 过滤器的本质就是一个函数,所以可以在一个单文件中直接封装一个过滤器函数
- 然后再需要的组件内引入函数,并注册为过滤器
自定义指令
01. 是什么
- 要对普通 dom 元素进行底层操作,这时候就会用到自定义指令
- 也就是说自定义指令主要是对 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 过滤器和自定义指令的资料请关注其它相关文章!