vue如何定义一个过滤器,vue指令和过滤器区别
主要介绍Vue.js中与滤镜和自定义指令相关的知识点，包括滤镜的定义和用法，以及自定义指令的概念和注册。
目录
过滤器01。什么事02？如何做(1)定义过滤器(2)如何使用它(3)过滤器的参数03。封装过滤函数01的自定义指令。什么事02？基本概念(1)钩子函数(2)参数03。指令注册(1)全球注册(2)本地注册。
过滤器
01. 是什么
过滤器可以对我们的输入数据执行必要的处理，并返回处理结果。
过滤器不会修改数据。
过滤器的本质是功能。
该函数应该有参数，这些参数必须包含要处理的源数据。
过滤器应该有一个返回值，返回处理后的结果。
导出默认值{
//通过过滤器创建本地过滤器
过滤器：{
过滤器名称(数据){
//处理传入数据
返回处理结果
}
}
}
02. 怎么做
（1）定义过滤器
本地过滤器：在组件中定义，只能在当前组件中使用。
通过过滤器结构创建
导出默认值{
//通过过滤器创建本地过滤器
过滤器：{
过滤器名称(数据){
//进程
返回处理结果
}
}
}
全局过滤器：通过Vue.filter创建全局过滤器，一次只能创建一个过滤器，可以在任何组件中使用。
需要在创建Vue实例之前定义它。
Vue.filter(过滤器名称，(数据)={
//做点什么
返回处理结果
})
在单独的文件中创建全局过滤器。
将其引入到所需的组件中，并在过滤器中注册。
从“vue”导入Vue
//通过Vue.filter创建全局过滤器
Const filter1=Vue.filter(过滤器名称，(数据)={
//做点什么
返回处理结果
})
//导出
导出{
过滤器1
}
//在组件中引入过滤器
从“@/utils/filters.js”导入{ filter1 }
导出默认值{
//在组件内的筛选器中，添加筛选器。
//筛选器可用于创建和注册筛选器。
//只有在筛选器中注册的那些才会被视为筛选器
过滤器：{
过滤器1
}
}
（2）使用方式
在插值表达式{{}}或v-bind表达式中，通过管道运算符3354 使用过滤器。
格式：{ {源数据筛选器}}
Div {{数据筛选器}} /div
多用途
可以并行使用多个过滤器，前者的处理结果将作为后者的参数传入。
Div {{数据筛选器1 筛选器2 }}/div
（3）过滤器的参数
如果没有手动传递参数，默认情况下将传递管道符号之前的数据。
如果手工传递参数，默认参数的传递不会受到影响。
过滤器的第一个参数始终是管道符号之前的数据。
手动传递的参数从参数列表中的第二个开始，依次向后传递。
03. 封装过滤器函数
过滤器的本质是一个函数，所以过滤函数可以直接封装在一个文件中。
//定义函数
const filterA=()={}
const filterB=()={}
//导出函数对象
导出{ filterA，filterB }
然后，将一个函数引入到所需的组件中，并注册为过滤器。
从导入*作为筛选器。/filters.js
//遍历filters.js中的方法
Object.keys(过滤器)。forEach(key={
Vue.filter(键，过滤器[键])
})
自定义指令
01. 是什么
要对普通DOM元素执行底层操作，此时将使用自定义指令。
也就是说，自定义指令主要对DOM元素进行操作。
02. 基本概念
（1）钩子函数
指令定义对象可以提供以下挂钩函数(都是可选的):
Bind:只调用一次。指令在第一次绑定到元素时被调用。这个钩子函数可以用来定义一个在绑定过程中执行一次的初始化事件。
Inserted:当绑定元素插入到父节点时调用，只要父节点存在，即使它没有插入到文档中。
Update:当绑定元素的组件更新时调用，不管绑定值是否更改。但是，通过比较更新前后的值，可以忽略不必要的模板更新。
ComponentUpdated:当绑定元素的所有组件都被更新时，即一个更新周期完成时调用。
Unbind:仅在指令从元素解除绑定时调用一次。
（2）参数
指令钩子函数将在以下参数中传递：
El:指令绑定的元素可以用来直接操作DOM，也就是放置指令的元素。
绑定：包含多个属性的对象。
名称：指令名，不带v前缀
Value:指令绑定的值，可以绑定一个对象传递多个值。
OldValue:指令绑定的旧值，禁止在update和componentUpdated挂钩中使用，无论值是否改变。
表达式：字符串形式的指令表达式。
Arg:传递给指令的参数
修改器：包含修改器的对象。
Vnode:Vue编译生成的虚拟节点。
OldVnode:前一个虚拟节点，它只在update和componentUpdated挂钩中可用。
//div v-demo:left=100/div
//这里左边是指令的丁丙对象的arg。
//100是指令的丁丙对象的值。
Vue.directive(demo ，{
//El-指示绑定元素，即放置指令的元素。
bind(el，binding，vnode){
//可以直接对这个元素做一些处理
El . style . position= fixed ；
const s=( binding.arg==left ？左 :上)；
El . style[s]=binding . value px ；
}
})
03. 指令注册
（1）全局注册
通过Vue.directive()注册全局指令，它包含两个参数：
第一个参数是用户定义的指令名。指令名不需要加上前缀v-，默认情况下会自动加上前缀。您可以在使用指令时添加前缀。
第二个参数可以是对象数据或指令函数。
Vue.directive(命令名，{
插入：函数(el){
//做点什么
}
})
（2）局部注册
通过在Vue实例中添加指令对象数据来注册本地自定义指令
导出默认值{
指令：{
命令名：{
功能
}
}
}
这就是vue滤镜和自定义命令的使用细节。更多关于vue滤镜和自定义命令的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。