目錄過濾器01. 是什么02. 怎么做（1）定義過濾器（2）使用方式（3）過濾器的參數(shù)03. 封裝過濾器函數(shù)自定義指令01. 是什么02. 基本概念（1）鉤子函數(shù)（2）參數(shù)03. 指令注冊（1）全局注冊（2）局部注冊過濾器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實例創(chuàng)建之前定義

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

在單獨的文件中創(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ào)用 ，只要父節(jié)點存在即可，即使它沒有插入文檔中 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é)點 oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用

// <div v-demo:left='100'></div>// 這里的 left 即為指令的 bingding對象的arg// 100 即為指令的 bingding對象的valueVue.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實例中添加 directives 對象數(shù)據(jù)注冊局部自定義指令

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

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