過濾器

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 處理結果
})

在單獨的檔案中建立一個全域性過濾器

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 f程式設計客棧rom './filters.js'
//遍歷 filters.js 內的方法
Object.keys(filters).forEach(key => { 
  Vue.filter(key,filters[key])
})

自定義指令

01. 是什麼

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

02. 基本概念

（1）鉤子函式

一個指令定義物件可以提供如下幾個鉤子函式 (均為可選)：

• bind：只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個繫結時執行一次的初始化事件
• inserted：當被繫結的元素插入父節點時呼叫 ，只要父節點存在即可，即使它沒有插入文件中
• update：當被繫結元素所在元件更新時呼叫，無論繫結的值是否發生變化都會呼叫。但可以通過比較更新前後的值，來忽略不必要的模板更新
www.cppcns.com
• componentUpdated：當被繫結元素所在元件的全部更新後，即完成一次更新週期時呼叫
• unbind：只調用一次，指令與元素解綁時呼叫
  

（2）引數

指令鉤子函式會被傳入以下引數:

• el：指令所繫結的元素，可以用來直接操作 DOM，即放置指令的那個元素
• binding：一個對www.cppcns.com象，裡面包含多個屬性
  • 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例項中新增 directives 物件資料註冊區域性自定義指令

export default {
    directives: {
        指令名:{
            函式
        }
    }
}

以上就是vue 過濾器和自定義指令的使用的詳細內容，更多關於vue 過濾器和自定義指令的資料請關注我們其它相關文章！