vue 過濾器和自定義指令的使用

Posted on by

過濾器

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對象的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 過濾器和自定義指令的資料請關註WalkonNet其它相關文章！

推薦閱讀：