本篇文章给大家分享的是有关如何在vue中使用过滤器和自定义指令，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
过滤器
过滤器可以对我们传入的数据进行必要的处理，并返回处理的结果
过滤器不会修改数据
过滤器的本质是函数
过滤器函数应该有参数，参数必须包含你想进行处理的源数据
过滤器应该有返回值，返回处理后的结果
export default { // 通过filters创建局部过滤器 filters:{ 过滤器名称(data){ // 对传入的data 进行处理 return 处理结果 } }}02. 怎么做
（1）定义过滤器
局部过滤器：定义在组件内部，只能在当前组件内使用
通过filters结构来创建
export default { // 通过filters创建局部过滤器 filters:{ 过滤器名称(data){ // 进行处理 return 处理结果 } }}全局过滤器：通过Vue.filter创建全局过滤器，一次只能创建一个，可以在任何组件中使用
需要在Vue实例创建之前定义
Vue.filter(过滤器名称，(data) => { // do something return 处理结果})在单独的文件中创建一个全局过滤器
在需要用到的组件中引入，并在filters中注册
import Vue from 'vue'// 通过Vue.filter创建全局过滤器const filter1 = Vue.filter(过滤器名称，(data) => { // do something return 处理结果})// 导出export { filter1}// 在组件中--引入过滤器import { filter1 } from '@/utils/filters.js'export default { // 在组件内的 filters中，添加过滤器 // filters既可以创建过滤器，又可以用来注册过滤器 // 只有在filters中注册的才会被认为是过滤器 filters: { filter1 }}（2）使用方式
在插值表达式{{}}中，或者v-bind表达式中，通过管道操作符——|来使用过滤器
格式：{{ 源数据 | 过滤器 }}
<div> {{ 数据 | 过滤器 }} </div>多次使用
过滤器支持多个并行使用，前者的处理结果，将作为后者的参数传入
<div> {{ 数据 | 过滤器1 | 过滤器2 }}</div>（3）过滤器的参数
如果没有手动传递参数，那么默认就会传递管道符前面的数据
如果手动的传递了参数，也不会影响默认参数的传递
过滤器函数的第一个参数永远是管道符前面的数据
而手动传递的参数，从参数列表的第二个开始，依次向后
03. 封装过滤器函数
过滤器的本质就是一个函数，所以可以在一个单文件中直接封装一个过滤器函数
// 定义函数const filterA = () => {}const filterB = () => {}// 导出函数对象export { filterA, filterB }然后再需要的组件内引入函数，并注册为过滤器
import * as filters from './filters.js'//遍历 filters.js 内的方法Object.keys(filters).forEach(key => { Vue.filter(key, filters[key])})自定义指令
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 钩子中可用
// <div v-demo:left="100"></div>// 这里的 left 即为指令的 bingding对象的arg// 100 即为指令的 bingding对象的valueVue.directive('demo',{ // el--表示被绑定的元素，即指令在放置的那一个元素 bind(el,binding,vnode){ // 可以直接对这个元素进行一些处理 el.style.position = 'fixed'; const s = ( binding.arg == 'left' ? 'left' : top ); el.style[s] = binding.value + 'px'; }})03. 指令注册
（1）全局注册
通过 Vue.directive() 方式注册全局指令，包含两个参数：
第一个参数为自定义指令名称，指令名称不需要加 v- 前缀，默认是自动加上前缀的，在使用指令的时候加上前缀即可
第二个参数可以是对象数据，也可以是一个指令函数
Vue.directive("指令名称", { inserted: function(el){ // do something }})（2）局部注册
通过在Vue实例中添加 directives 对象数据注册局部自定义指令
export default { directives: { 指令名:{ 函数 } }}Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
以上就是如何在vue中使用过滤器和自定义指令，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。
