【干貨】vue2.0-模塊化全局自定義過濾器和vue中export和export default用法（前端網備份）

本文介紹下vue模塊化下全局過濾器的用法，以及Object.keys;map();forEach();

還有vue中export和export default和import寫法的區別

src/filters/index.js

exports.datefmt = (input) => {
    var res = "";
    var date = new Date(input);

    var year = input.getFullYear();
    var month = input.getMonth() + 1;
    var day = input.getDate();
    var date = year + "-" + month + "-" + day;
    console.log(date);
    return date;
}

main.js

import filters from './filters';
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

hello.vue

{{item.ctime | datefmt}}

然后再介紹一下vue2.0的filters的傳參寫法

index.js
const  datefmt = function(input,format){
    var res = "";
    var date = new Date(input);

    var year = input.getFullYear();
    var month = input.getMonth() + 1;
    var day = input.getDate();
    if(format == 'yyys-mm-dd'){
        var date = year + "-" + month + "-" + day;
    }else{
        var date = year + "-" + month + "-" + day + " 14:25:33";
    }

    console.log(format);
    return date;
}
export default {datefmt};

hello.vue
 {{item.ctime | datefmt('yyys-mm-dd')}}

意思便為vue里面過濾器自定義傳參一個字符串，然后通過過濾器里面看是不是相同的字符串來匹配規則

下來這邊掃盲一下Object.keys;map();forEach();

方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組。
map與foreach參數基本一樣，但是返回值foreach為underfind,map為數組
具體參考https://www.cnblogs.com/chenzhiyu/p/8692845.html

var obj = {'a':'123','b':'345'};
console.log(Object.keys(obj));  //['a','b']
//把這個map替換成forEach，里面打印的結果一模一樣
Object.keys(obj).map((currentValue, index,arr)=>{
  console.log(currentValue,index,arr);
  //currentValue=>當前元素的值(必須)    index=>當前元素的索引值 arr=>當前元素屬於的數組對象
  // a 0 (2) ["a", "b"]
  //b 1 (2) ["a", "b"]
});

Object.keys(filters).forEach(key => {
  console.log(key);//datefmt
  console.log(filters);//{datefmt: ƒ}所以filters[key]便為datefmt過濾器定義的方法
  Vue.filter(key, filters[key])
})

emp:官方文檔的全局過濾器定義為以下:

為Vue.filter(key, filters[key])以上:

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

export和export default

這里只簡單介紹下vue中用法的區別，詳細的請查看阮一峰ES6
http://es6.ruanyifeng.com/#docs/module

export的用法:

比如上面說的index.js里面寫

index.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

main.js
import {firstName, lastName, year} from './filters';
console.log(firstName, lastName, year)//Michael Jackson 1958

export default的用法:

index.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export default {firstName, lastName, year};

main.js
import filters from './filters';
console.log(filters)//{firstName: "Michael", lastName: "Jackson", year: 1958}

可以看出兩者最重要的區別在於import引用后export default這里是可以通過別名的,而export必須通過對象的引進才能有值