您的位置:首页 > 编程学习 > > 正文

vue过滤器使用思路(vue 过滤器和自定义指令的使用)

更多 时间:2022-03-28 12:25:07 类别:编程学习 浏览量:644

vue过滤器使用思路

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表达式中,通过管道操作符——|来使用过滤器
    • 格式:{{ 源数据 | 过滤器 }}
  • <li> {{ 数据 | 过滤器 }} </li>
    
    
    • 多次使用

    过滤器支持多个并行使用,前者的处理结果,将作为后者的参数传入

  • <li> {{ 数据 | 过滤器1 | 过滤器2 }}</li>
    
    
  • (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 钩子中可用
  • // <li v-demo:left="100"></li>
    // 这里的 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 过滤器和自定义指令的资料请关注开心学习网其它相关文章!

    您可能感兴趣