亲宝软件园·资讯

展开

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

Rouvan 人气:0
想了解vue 过滤器和自定义指令的使用的相关内容吗,Rouvan在本文为您仔细讲解vue 过滤器和自定义指令的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,过滤器,vue,自定义指令,下面大家一起来学习吧。

过滤器

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: {
        指令名:{
            函数
        }
    }
}

加载全部内容

相关教程
猜你喜欢
用户评论