【视】019.自定义过滤器和指令

过滤器

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 实例添加对象数据 来注册自定义本地指令

我是前面的小妞，如有错误请谅解