過濾器

01. 是什么

過濾器可以對我們傳入的數(shù)據(jù)進(jìn)行必要的處理，并返回處理的結(jié)果

• 過濾器不會修改數(shù)據(jù)
• 過濾器的本質(zhì)是函數(shù)
• 過濾器函數(shù)應(yīng)該有參數(shù)，參數(shù)必須包含你想進(jìn)行處理的源數(shù)據(jù)
• 過濾器應(yīng)該有返回值，返回處理后的結(jié)果

export default {
    // 通過filters創(chuàng)建局部過濾器
    filters:{
        過濾器名稱(data){
            // 對傳入的data 進(jìn)行處理
            return 處理結(jié)果
        }  
    }
}

02. 怎么做

（1）定義過濾器

• 局部過濾器：定義在組件內(nèi)部，只能在當(dāng)前組件內(nèi)使用

通過filters結(jié)構(gòu)來創(chuàng)建

export default {
    // 通過filters創(chuàng)建局部過濾器
    filters:{
      過濾器名稱(data){
          // 進(jìn)行處理
          return 處理結(jié)果
      }  
    }
}

• 全局過濾器：通過Vue.filter創(chuàng)建全局過濾器，一次只能創(chuàng)建一個，可以在任何組件中使用

需要在Vue實(shí)例創(chuàng)建之前定義

Vue.filter(過濾器名稱，(data) => {
    // do something
    return 處理結(jié)果
})

在單獨(dú)的文件中創(chuàng)建一個全局過濾器
在需要用到的組件中引入，并在filters中注冊

import Vue from 'vue'
// 通過Vue.filter創(chuàng)建全局過濾器
const filter1 = Vue.filter(過濾器名稱，(data) => {
    // do something
    return 處理結(jié)果
})
// 導(dǎo)出
export {
    filter1
}

// 在組件中--引入過濾器
import { filter1 } from '@/utils/filters.js'

export default {
    // 在組件內(nèi)的 filters中，添加過濾器
    // filters既可以創(chuàng)建過濾器，又可以用來注冊過濾器
    // 只有在filters中注冊的才會被認(rèn)為是過濾器
    filters: {
        filter1
    }
}

（2）使用方式

• 在插值表達(dá)式{{}}中，或者v-bind表達(dá)式中，通過管道操作符——|來使用過濾器
• 格式：{{ 源數(shù)據(jù) | 過濾器 }}

<div> {{ 數(shù)據(jù) | 過濾器 }} </div>

• 多次使用

過濾器支持多個并行使用，前者的處理結(jié)果，將作為后者的參數(shù)傳入

<div> {{ 數(shù)據(jù) | 過濾器1 | 過濾器2 }}</div>

（3）過濾器的參數(shù)

• 如果沒有手動傳遞參數(shù)，那么默認(rèn)就會傳遞管道符前面的數(shù)據(jù)
• 如果手動的傳遞了參數(shù)，也不會影響默認(rèn)參數(shù)的傳遞
  • 過濾器函數(shù)的第一個參數(shù)永遠(yuǎn)是管道符前面的數(shù)據(jù)
  • 而手動傳遞的參數(shù)，從參數(shù)列表的第二個開始，依次向后
    

03. 封裝過濾器函數(shù)

• 過濾器的本質(zhì)就是一個函數(shù)，所以可以在一個單文件中直接封裝一個過濾器函數(shù)

// 定義函數(shù)
const filterA = () => {}
const filterB = () => {}
// 導(dǎo)出函數(shù)對象
export { filterA, filterB }

• 然后再需要的組件內(nèi)引入函數(shù)，并注冊為過濾器

import * as filters from './filters.js'
//遍歷 filters.js 內(nèi)的方法
Object.keys(filters).forEach(key => { 
  Vue.filter(key, filters[key])
})

自定義指令

01. 是什么

• 要對普通 DOM 元素進(jìn)行底層操作，這時候就會用到自定義指令
  • 也就是說自定義指令主要是對 DOM 元素進(jìn)行操作
    

02. 基本概念

（1）鉤子函數(shù)

一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：

• bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用，用這個鉤子函數(shù)可以定義一個綁定時執(zhí)行一次的初始化事件
• inserted：當(dāng)被綁定的元素插入父節(jié)點(diǎn)時調(diào)用 ，只要父節(jié)點(diǎn)存在即可，即使它沒有插入文檔中
• update：當(dāng)被綁定元素所在組件更新時調(diào)用，無論綁定的值是否發(fā)生變化都會調(diào)用。但可以通過比較更新前后的值，來忽略不必要的模板更新
• componentUpdated：當(dāng)被綁定元素所在組件的全部更新后，即完成一次更新周期時調(diào)用
• unbind：只調(diào)用一次，指令與元素解綁時調(diào)用
  

（2）參數(shù)

指令鉤子函數(shù)會被傳入以下參數(shù):

• el：指令所綁定的元素，可以用來直接操作 DOM，即放置指令的那個元素
• binding：一個對象，里面包含多個屬性
  • name：指令名，沒有v-前綴
  • value：指令綁定的值，可以綁定一個對象以傳遞多個值
  • oldValue：指令綁定的舊值，禁止update和componentUpdated鉤子中可用，無論值是否改變
  • expression：字符串形式的指令表達(dá)式
  • arg：傳遞給指令的參數(shù)
  • modifiers：一個包含修飾符的對象
• vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)
• oldVnode：上一個虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用

// <div v-demo:left="100"></div>
// 這里的 left 即為指令的 bingding對象的arg
// 100 即為指令的 bingding對象的value
Vue.directive('demo',{
    // el--表示被綁定的元素，即指令在放置的那一個元素
    bind(el,binding,vnode){
        // 可以直接對這個元素進(jìn)行一些處理
        el.style.position = 'fixed';
        const s = ( binding.arg == 'left' ? 'left' : top );
        el.style[s] = binding.value + 'px';
    }
})

03. 指令注冊

（1）全局注冊

通過 Vue.directive() 方式注冊全局指令，包含兩個參數(shù)：

• 第一個參數(shù)為自定義指令名稱，指令名稱不需要加 v- 前綴，默認(rèn)是自動加上前綴的，在使用指令的時候加上前綴即可
• 第二個參數(shù)可以是對象數(shù)據(jù)，也可以是一個指令函數(shù)

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

（2）局部注冊

通過在Vue實(shí)例中添加 directives 對象數(shù)據(jù)注冊局部自定義指令

export default {
    directives: {
        指令名:{
            函數(shù)
        }
    }
}

以上就是vue 過濾器和自定義指令的使用的詳細(xì)內(nèi)容，更多關(guān)于vue 過濾器和自定義指令的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論