目錄過濾器01. 是什么02. 怎么做（1）定義過濾器（2）使用方式（3）過濾器的參數03. 封裝過濾器函數自定義指令01. 是什么02. 基本概念（1）鉤子函數（2）參數03. 指令注冊（1）全局注冊（2）局部注冊過濾器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對象的valueVue.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 過濾器和自定義指令的資料請關注好吧啦網其它相關文章！