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

过滤器

01. 是什么

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

  • 过滤器不会修改数据
  • 过滤器的本质是函数
  • 过滤器函数应该有参数,参数必须包含你想进行处理的源数据
  • 过滤器应该有返回值,返回处理后的结果
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对象的value
Vue.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 过滤器和自定义指令的资料请关注我们其它相关文章!

(0)

相关推荐

  • 8个非常实用的Vue自定义指令

    本文在github做了收录 github.com/Michael-lzg- demo源码地址 github.com/Michael-lzg- 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令.它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作. Vue 自定义指令有全局注册和局部注册两种方式.先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令.然后

  • Vue filter 过滤器、以及在table中的使用介绍

    使用方法: // 双花括号中 {{ isActive | isActiveFitlter}} // 在v-bind 中 <div v-bind:id=" isActive | isActiveFitlter"></div> 一.组件中定义本地 Filter filters:{ isActiveFitlter : (value)=>{ return value===1?'激活':'冻结' } } 二.创建Vue实例前定义全局过滤器 Vue.filter('i

  • Vue 3自定义指令开发的相关总结

    什么是指令(directive) 在Angular和Vue中都有Directive的概念,我们通常讲Directive 翻译为"指令". 在计算机技术中,指令是由指令集架构定义的单个的CPU操作.在更广泛的意义上,"指令"可以是任何可执行程序的元素的表述,例如字节码. 那么在前端框架Vue中"指令"到底是什么,他有什么作用呢? 在Vue开发中我们在模板中经常会使用v-model和v-show等以v-开头的关键字,这些关键字就是Vue框架内置的指令

  • vue3.0自定义指令(drectives)知识点总结

    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做. const app = Vue.createApp({ mounted(){ this.$refs.input.focus(); }, template: `<input type="text" ref="input" />`, }); 在mou

  • 如何使用vue过滤器filter

    概述 在 vue2.0 之前,是有内置过滤器的,在2.0中已经没有内置的过滤器了,但我们可以自定义过滤器. 关于 vue 过滤器,在官方文档中是这样说明的: Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示. 即过滤器是用来格式化数据的一个函数.过滤器不会修改原始数据,它的作用是过滤数据,就是对数据进

  • Vue3不支持Filters过滤器的问题

    filters过滤器已从Vue 3.0中删除,不再支持. 2.x 语法 在2.x中,开发人员可以使用过滤器来处理常见的文本格式. <template> <h1>Bank Account Balance</h1> <p>{{ accountBalance | currencyUSD }}</p> </template> <script> export default { props: { accountBalance: {

  • Vue封装全局过滤器Filters的步骤

    (PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project) 在前后端分离的项目中,经常会有后台返回的数据需要经过处理才能显示到页面上的场景. 使用最多的场景就是日期/时间.数字.字符串的格式化处理,实际业务中可能还有更复杂的数据处理逻辑. 下面就拿封装全局的处理数字和字符串的 filter 来展示 vue 如何 封装全局filter 并统一处理. 一.定义/封装过滤器 在 src目录 下新建 filters目录 用来专门存放全局过滤器,如果项

  • vue3删除过滤器的原因

    什么是vue的过滤器 过滤器可以通俗理解成是一个特殊的方法,用来加工数据的 比如枚举值可以使用过滤器:如 1 2 3 4 对应 成功 失败 进行中 已退回 比如价格后面跟个过滤器,将价格格式化成小数点两位 比如时间格式化等 详细请看官方文档 why? 笔者认为:原因就是vue3要精简代码,并且filter功能重复,filter能实现的功能,methods和计算属性基本上也可以实现.所以就干脆把filter这方面的vue源码给删掉,这样的话,更加方便维护. 举例分析 需求描述 假设我们有一个快递信

  • Vue过滤器,生命周期函数和vue-resource简单介绍

    一.过滤器 使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app&qu

  • 详解Vue自定义指令及使用

    一.什么是指令 学习 vue 的时候肯定会接触指令,那么什么是指令呢? 在 vue 中提供了一些对于页面和数据更为方便的输出,这些操作就叫做指令,以 v-xxx 表示,比如 html 页面中的属性 <div v-xxx ></div> 比如在 angular 中 以 ng-xxx 开头的就叫做指令 指令中封装了一些 DOM 行为,结合属性作为一个暗号,暗号有对应的值,根据不同的值,会进行相关 DOM 操作的绑定,即可以进行一些模板的操作 vue 中常用的一些内置 v- 指令 v-t

  • vue通过过滤器实现数据格式化

    一.本节说明 在使用插值表达式的时候,我们通常会有一种需求,就是将数据进行二次的格式化.VUE的过滤器的实现参考了linux的shell命令的管道的实现原理:即上一个命令的输出,是下一个命令的输入. 所以过滤器可以串接使用:{{数据 | 过滤器A | 过滤器B}} 除了在插值表达式中可以使用过滤器,在后文中将要学习到的v-bind指令中也可以使用过滤器.用法是一致的,到时候我们再看一看. 二. 怎么做 全局过滤器(定义一个用于做日期格式化的过滤器) 过滤器的第一个参数是固定的,就是输入的数据.对

  • Vue 3.0自定义指令的使用入门

    提示:在阅读本文前,建议您先阅读 Vue 3 官方文档 自定义指令 章节的内容. 一.自定义指令 1.注册全局自定义指令 const app = Vue.createApp({}) // 注册一个全局自定义指令 v-focus app.directive('focus', {   // 当被绑定的元素挂载到 DOM 中时被调用   mounted(el) {     // 聚焦元素     el.focus()   } }) 2.使用全局自定义指令 <div id="app"&g

  • vue自定义指令限制输入框输入值的步骤与完整代码

    需求 前端开发过程中,经常遇到表单校验的需求,比如校验用户输入框的内容,限制用户只能输入数字. 本文内容基于 element-ui,el-form 组件可以绑定 model.rule 用于表单内容校验,但如果有多个表单多个输入框那就得写很多个 rule,虽然方法可以通用可是使用起来也是比较繁琐的,可通过自定义执行实现一次注册,多次使用. Vue 自定义指令 我们使用 el-input 作为表单的输入框 1. 先注册一个自定义指令 import Vue from 'vue'; Vue.direct

随机推荐