目錄過(guò)濾器01. 是什么02. 怎么做（1）定義過(guò)濾器（2）使用方式（3）過(guò)濾器的參數(shù)03. 封裝過(guò)濾器函數(shù)自定義指令01. 是什么02. 基本概念（1）鉤子函數(shù)（2）參數(shù)03. 指令注冊(cè)（1）全局注冊(cè)（2）局部注冊(cè)過(guò)濾器01. 是什么

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

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

export default { // 通過(guò)filters創(chuàng)建局部過(guò)濾器 filters:{過(guò)濾器名稱(data){ // 對(duì)傳入的data 進(jìn)行處理 return 處理結(jié)果} }}02. 怎么做（1）定義過(guò)濾器 局部過(guò)濾器：定義在組件內(nèi)部，只能在當(dāng)前組件內(nèi)使用

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

export default { // 通過(guò)filters創(chuàng)建局部過(guò)濾器 filters:{ 過(guò)濾器名稱(data){ // 進(jìn)行處理 return 處理結(jié)果 } }} 全局過(guò)濾器：通過(guò)Vue.filter創(chuàng)建全局過(guò)濾器，一次只能創(chuàng)建一個(gè)，可以在任何組件中使用

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

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

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

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

// 在組件中--引入過(guò)濾器import { filter1 } from ’@/utils/filters.js’export default { // 在組件內(nèi)的 filters中，添加過(guò)濾器 // filters既可以創(chuàng)建過(guò)濾器，又可以用來(lái)注冊(cè)過(guò)濾器 // 只有在filters中注冊(cè)的才會(huì)被認(rèn)為是過(guò)濾器 filters: {filter1 }}（2）使用方式 在插值表達(dá)式{{}}中，或者v-bind表達(dá)式中，通過(guò)管道操作符——|來(lái)使用過(guò)濾器 格式：{{ 源數(shù)據(jù) | 過(guò)濾器 }}

<div> {{ 數(shù)據(jù) | 過(guò)濾器 }} </div> 多次使用

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

<div> {{ 數(shù)據(jù) | 過(guò)濾器1 | 過(guò)濾器2 }}</div>（3）過(guò)濾器的參數(shù) 如果沒(méi)有手動(dòng)傳遞參數(shù)，那么默認(rèn)就會(huì)傳遞管道符前面的數(shù)據(jù) 如果手動(dòng)的傳遞了參數(shù)，也不會(huì)影響默認(rèn)參數(shù)的傳遞 過(guò)濾器函數(shù)的第一個(gè)參數(shù)永遠(yuǎn)是管道符前面的數(shù)據(jù)而手動(dòng)傳遞的參數(shù)，從參數(shù)列表的第二個(gè)開(kāi)始，依次向后03. 封裝過(guò)濾器函數(shù) 過(guò)濾器的本質(zhì)就是一個(gè)函數(shù)，所以可以在一個(gè)單文件中直接封裝一個(gè)過(guò)濾器函數(shù)

// 定義函數(shù)const filterA = () => {}const filterB = () => {}// 導(dǎo)出函數(shù)對(duì)象export { filterA, filterB } 然后再需要的組件內(nèi)引入函數(shù)，并注冊(cè)為過(guò)濾器

import * as filters from ’./filters.js’//遍歷 filters.js 內(nèi)的方法Object.keys(filters).forEach(key => { Vue.filter(key, filters[key])})自定義指令01. 是什么 要對(duì)普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令 也就是說(shuō)自定義指令主要是對(duì) DOM 元素進(jìn)行操作02. 基本概念（1）鉤子函數(shù)

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

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

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

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

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

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

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

Vue.directive('指令名稱', { inserted: function(el){// do something }})（2）局部注冊(cè)

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

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

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