【干货】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必须通过对象的引进才能有值