vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue 过滤器和自定义指令

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

作者:Rouvan

本文主要介绍Vue.js中过滤器和自定义指令相关的知识点,包括过滤器的定义方式,和使用方法,以及自定义指令的概念和注册方式。

过滤器

01. 是什么

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

export default {
    // 通过filters创建局部过滤器
    filters:{
        过滤器名称(data){
            // 对传入的data 进行处理
            return 处理结果
        }  
    }
}

02. 怎么做

(1)定义过滤器

通过filters结构来创建

export default {
    // 通过filters创建局部过滤器
    filters:{
      过滤器名称(data){
          // 进行处理
          return 处理结果
      }  
    }
}

需要在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)使用方式

<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. 是什么

02. 基本概念

(1)钩子函数

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

(2)参数

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

// <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() 方式注册全局指令,包含两个参数:

Vue.directive("指令名称", {
    inserted: function(el){
        // do something
    }
})

(2)局部注册

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

export default {
    directives: {
        指令名:{
            函数
        }
    }
}

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

您可能感兴趣的文章:
阅读全文