換個角度使用VUE過濾器

過濾器在Vue中的主要用於文字格式化，如小寫轉大小，日期格式化等操作。官方對這個功能介紹也很簡單，不過確實很簡單，就一個函式而已。但最近在做兩款APP時，遇到一些特殊的需求。然後就對vue中的filter一些用法結合原始碼好好的梳理了下。下邊我們以一個日期格式化展開討論。本文配套的demo可以微信關注公眾號【小院不小】回覆vuefilter獲得。

1. 定義一個日期格式化函式

都9012了，我們就採用 ES Module的寫法，在vue初始化的專案src的檔案中新建一個filters資料夾，並在其中新增DateFmt.js檔案，程式碼如下

// wx:46488492export function DateFmt(date, fmt) {if (date == null) return null;var o = {    "M+": date.getMonth() + 1, // 月份
    "d+": date.getDate(), // 日
    "h+": date.getHours(), // 小時
    "m+": date.getMinutes(), // 分
    "s+": date.getSeconds(), // 秒
    "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
    "S": date.getMilliseconds()
};if (/(y+)/.test(fmt))
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)    if (new RegExp("(" + k + ")").test(fmt))
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;
}

2. 使用過濾器 DateFmt

定義好函式後，我們採用全域性註冊filter的方式。在 main.js中使用 import { DateFmt } from '@/filters/DateFmt.js' 匯入我們上邊定義的函式。 使用 Vue.filter("DateFmt", DateFmt) 完成filter全域性註冊。

在 components資料夾中，新增我們的測試元件 DateFormat.vue,在該檔案 template>div節點下輸入 {{new Date()|DateFmt('yyyy-MM-dd hh:mm:ss')}} 然後在app.vue引入我們剛新新增的元件，執行，你就會在看到當前日期已經按照我們需要的格式顯示在網頁上。是的，就是這麼簡單，那完了麼？

3. 在JS中使用 DateFmt

好奇的朋友會發現，我們定義的filter都是在template中使用的，那我如何在js程式碼中使用呢？當然，在開發這兩個app期間，減少資料轉換的次數，有了這樣的需求。

3.1 在元件頁面匯入函式

回到開頭，我們強調了一下，過濾器其實就是一個函式。既然是函式，那引入就好了。所以在我們最初建立  DateFormat.vue 單檔案元件的 <script>塊中使用 import { DateFmt } from '@/filters/DateFmt.js'匯入我們的函式。程式碼如下：

<script>// wx:46488492import { DateFmt } from '@/filters/DateFmt.js';export default {
data(){return{curDateImportFilter: DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')
}}}
</script>

在我們 <template>中新加一個元素，並繫結  curDateImportFilter屬性，執行 npm run serve 回到瀏覽器，你就會看到兩個格式化日期。這樣好嗎？我們多了一個import , 雖然實現了，但覺得 不夠好。

3.2 使用Vue.filter 返回過濾器

如果我們仔細看官方文件，就會發現官說明了，透過  Vue.filter("filter")返回定義的 函式 ,所以Vue.filter不僅可以註冊，還可以返回。
我們繼續在data中新增屬性 :

curDateVueFilter: Vue.filter("DateFmt")(new Date(), 'yyyy-MM-dd hh:mm:ss')

透過上邊的步驟繫結該屬性，你會在瀏覽器上看到三個格式化好的日期。要使用Vue.filter,我們不得不額外的匯入 import Vue from 'vue'。跟上邊一樣，雖然實現了，但 不夠好。

3.3 使用例項屬性$options

在vue元件，每個元件都有各自的屬性，這些屬性大多掛載中屬性  $options中，在chrome瀏覽器列印 $vm0資訊，我們就找到filter的資訊。這裡科普一下，在安裝vue開發者工具後 $vm0表示我們當前選擇的元件，結果如下圖所示：

從圖形上看，當前元件的filters為一個物件，並不能直接找到，不過展開至 __proto__原型上看到了我們的DateFmt方法。好了現在我們在繼續在data中新增屬性

curDateOptFilter: this.$options.filters.DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')

是的，採用這個方式，就不用再引入vue或者函式了，跟直接在template使用一樣。簡潔方便，感覺好多了。在深入一點，透過除錯我們就會發現 Vue.filter 是呼叫options.filters原型上的方法，如下圖所示

4. 總結

再簡單的功能，也有你想不到的用法。做開發，還是要會發散。本來這篇文章還想分享一下 vue 中 scope css穿透功能。為了方便閱讀，就且聽下回分解吧。