換個角度使用VUE過濾器

過濾器在Vue中的主要用於文本格式化，如小寫轉大小，日期格式化等操做。官方對這個功能介紹也很簡單，不過確實很簡單，就一個函數而已。但最近在作兩款APP時，遇到一些特殊的需求。而後就對vue中的filter一些用法結合源碼好好的梳理了下。下邊咱們以一個日期格式化展開討論。javascript

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

都9012了，咱們就採用 ES Module的寫法，在vue初始化的項目src的文件中新建一個filters文件夾，並在其中添加DateFmt.js文件，代碼以下css

export 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全局註冊。vue

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

3. 在JS中使用 DateFmt

好奇的朋友會發現，咱們定義的filter都是在template中使用的，那我如何在js代碼中使用呢？固然，在開發這兩個app期間，減小數據轉換的次數，有了這樣的需求。chrome

3.1 在組件頁面導入函數

回到開頭，咱們強調了一下，過濾器其實就是一個函數。既然是函數，那引入就行了。因此在咱們最初創建 DateFormat.vue 單文件組件的<script>塊中使用import { DateFmt } from '@/filters/DateFmt.js'導入咱們的函數。代碼以下：npm

<script>
import { 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'。跟上邊同樣，雖然實現了，但不夠好。markdown

3.3 使用實例屬性$options

在vue組件，每一個組件都有各自的屬性，這些屬性大多掛載中屬性 $options中，在chrome瀏覽器打印*$vm0信息，咱們就找到filter的信息。這裏科普一下，在安裝vue開發者工具後$vm0*表示咱們當前選擇的組件，結果以下圖所示：app

從圖形上看，當前組件的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穿透功能。爲了方便閱讀，就且聽下回分解吧。

歡迎感興趣的朋友關注個人微信訂閱號"小院不小"，或者點擊下方的二維碼關注。我將多年開發中遇到的難點，以及一些有意思的功能，體會都會一一發布到個人訂閱號中

閒來無事，採用cocos creator開發了一個小遊戲，感興趣的朋友一個能夠來玩玩