建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)vue中如何實(shí)現(xiàn)注冊(cè)自定義的全局js的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。
前端開(kāi)發(fā)的時(shí)候，總會(huì)需要寫一些js方法，在vue框架中為了方便使用，可以考慮注冊(cè)一個(gè)全局的js方法，下面是注冊(cè)步驟：
1.0 可以在assets文件中的js文件下面新建一個(gè)js文件，如：yun.js---
2.0 在yun.js 上面實(shí)現(xiàn)日期格式方法，如下
import Vue from 'vue'
const format = (o, format) => { //日期類型
let args = {
"M+": o.getMonth() + 1,
"d+": o.getDate(),
"h+": o.getHours(),
"m+": o.getMinutes(),
"s+": o.getSeconds(),
"q+": Math.floor((o.getMonth() + 3) / 3), //quarter
"S": o.getMilliseconds()
};
if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (o.getFullYear() + "").substr(4 - RegExp.$1.length));
for (let i in args) {
let n = args[i];
if (new RegExp("(" + i + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));
}
return format;
}
export default function(Vue) {
//添加全局API
Vue.prototype.$yuns = {
format
}
}3.0 下面將yun.js文件注冊(cè)到vue的全局中去，需要在main.js文件下面注冊(cè)全局：如圖下
4.0 前面步驟將自定義的js注冊(cè)到全局去了，后面就可以使用了，如下：
已上就是在vue中注冊(cè)全局的自定義js文件的步驟，以后需要添加js方法，就在yun.js加上去就可以調(diào)用了
補(bǔ)充：Vue自定義函數(shù)掛到全局方法
方法一:使用Vue.prototype
//在mian.js中寫入函數(shù)
Vue.prototype.getToken = function (){
...
}
//在所有組件里可調(diào)用函數(shù)
this.getToken();方法二:使用exports.install+Vue.prototype
// 寫好自己需要的fun.js文件
exports.install = function (Vue, options) {
Vue.prototype.getToken = function (){
...
};
};
// main.js 引入并使用
import fun from './fun'
Vue.use(fun);
//在所有組件里可調(diào)用函數(shù)
this.getToken();在用了exports.install方法時(shí)，運(yùn)行報(bào)錯(cuò)exports is not defined
解決方法：
export default {
install(Vue) {
Vue.prototype.getToken = {
...
}
}
}方法三：使用全局變量模塊文件
Global.vue文件：
在需要的地方引用進(jìn)全局變量模塊文件，然后通過(guò)文件里面的變量名字獲取全局變量參數(shù)值。
感謝各位的閱讀！關(guān)于“vue中如何實(shí)現(xiàn)注冊(cè)自定義的全局js”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
分享題目：vue中如何實(shí)現(xiàn)注冊(cè)自定義的全局js-創(chuàng)新互聯(lián)
路徑分享：http://fisionsoft.com.cn/article/djssoi.html
