寫項(xiàng)目的時(shí)候雪标，有一些方法我們是需要全局使用的，比如數(shù)字的四色五入保留小數(shù)點(diǎn)啊溉跃、一些工具方法村刨、字符的格式化啊等等。這些很多頁面需要用的喊积、
使用頻率極高的方法烹困，我們一般會(huì)將其封裝為全局的方法；我以前是這樣做的乾吻，有這么幾種方式：
1髓梅、掛載到vue.prototype
- 在
main.js入口文件中掛載到vue.prototype拟蜻，如我們封裝一個(gè)獲取時(shí)間戳的函數(shù)。
Vue.prototype.now = Date.now || function () {
return new Date().getTime();
};
- 然后就可以在
.vue頁面中使用了
<script>
export default {
mounted(){
console.log('now:' + this.now());
},
}
</script>
2枯饿、全局混入mixins
- 同樣也還是在
main.js中酝锅。 -
mixins的全局注入規(guī)則大家應(yīng)該都懂，如果組件中沒有這個(gè)getTime方法奢方，那么就會(huì)在頁面中注入這個(gè)方法搔扁。
Vue.mixin({
data() {},
methods: {
getTime() {
return new Date().getTime();
}
}
});
new App({
el: '#app'
// ...
});
3、關(guān)于vue.filters
（1）問題
- 前面兩種方法弊端有很多蟋字，比如一般將全局變量掛載到
prototype總是不太好的稿蹲，狀態(tài)管理我們用vuex；第二個(gè)全局混入的話鹊奖，子組件中也會(huì)混入這些方法等等苛聘；最大的弊端就是代碼的可讀性和維護(hù)問題，如果項(xiàng)目體積大了忠聚，復(fù)用的方法多了设哗，總不能都掛到prototye上去對(duì)吧？ - 這個(gè)時(shí)候两蟀，
vue.filters過濾器就能夠較好的解決這個(gè)問題网梢。
（2）使用
先看一波官網(wǎng)-->傳送門
ok，看完了赂毯，基本了解了過濾器的概念和基本使用方式以后战虏，我們具體到項(xiàng)目中的使用。
-
新建一個(gè)
filters文件夾欢瞪，丟一行代碼（很常用的一行代碼活烙，就是對(duì)數(shù)字做一些四舍五入的處理）
數(shù)字四舍五入保留兩位小數(shù)點(diǎn) main.js中引入
// global filters
import Vue from 'vue';
import * as filters from '@/filters';
Object.keys(filters).forEach((key) => {
Vue.filter(key, filters[key]);
});
- 然后頁面中就可以使用了
<div>{{num | formatAmountFixed2}}</div>
<script>
data(){
return {
num: 11111
}
}
</script>
你可能感興趣：
Ewall的簡書
vscode+eslint讓你編程快到飛起
手把手教你用vue+node+mongodb搭建一個(gè)小商場
小程序的因難見巧
看完你就該會(huì)git了
CSS日常踩坑后的總結(jié)
