Vue之封裝公用變量以及實(shí)現(xiàn)方式
阿西八?。。?xiě)久了Flutter，前端的知識(shí)真的是忘得差不多了，今天就來(lái)復(fù)習(xí)一下Vue中如何封裝公用變量以及公用方法
以封裝一個(gè)正則表達(dá)式為例！
第一步
創(chuàng)建我們的公用文件夾
我們來(lái)看一下utils.js中的代碼
class PublicMethods{
constructor() {
this.name = '公用變量'
}
verificationPhon(phone){
// 大陸手機(jī)號(hào)碼11位數(shù)，匹配格式：前三位固定格式+后8位任意數(shù)
// 13+任意數(shù) * 15+除4的任意數(shù) * 18+除1和4的任意數(shù) * 17+除9的任意數(shù) * 147
// 新增了166、198、199號(hào)段的手機(jī)號(hào)
var reg= /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
return reg.test(phone);
}
}
var Plugins = new PublicMethods();
export default Plugins;
知識(shí)講解：
export 和 export default的區(qū)別是什么？
通過(guò)export拋出去的變量或者方法，使用的時(shí)候需要用{ }包裹住，來(lái)指明使用什么，而export default就方便些，拋出去后，直接用即可，可以自己試一下！
很好，我們現(xiàn)在已經(jīng)將公用的方法以及變量拋出去了，那如何使用他呢？
首先打開(kāi)我們Vue的命根子：main.js
import Vue from 'vue'
import App from './App'
import Plugins from '@/utils/utils.js'
Vue.config.productionTip = false
Vue.prototype.Plugins = Plugins;
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
注意代碼中的Plugins，就是我們掛載到了Vue的實(shí)例上面了，也就是可以全局使用這個(gè)封裝的JS，接下來(lái)我們就去需要使用的頁(yè)面使用它
點(diǎn)擊圖中的驗(yàn)證碼按鈕，就可以調(diào)用我們的這個(gè)方法了，記得傳入手機(jī)號(hào)
getCode(){
console.log(this.Plugins.verificationPhon(this.phone));
}
結(jié)束了！完結(jié)！
以上這篇Vue之封裝公用變量以及實(shí)現(xiàn)方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue對(duì)象或者數(shù)組中數(shù)據(jù)變化但是視圖沒(méi)有更新問(wèn)題及解決
這篇文章主要介紹了vue對(duì)象或者數(shù)組中數(shù)據(jù)變化但是視圖沒(méi)有更新問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例
這篇文章主要為大家介紹了vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多條件和模糊搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
使用Vue3實(shí)現(xiàn)羊了個(gè)羊的算法
這篇文章主要介紹了使用Vue3實(shí)現(xiàn)羊了個(gè)羊的算法,初始化的隨機(jī)位置算法，通過(guò)實(shí)例代碼介紹了計(jì)算偏移量的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫(xiě)css
這篇文章主要介紹了詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫(xiě)css，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Vite多環(huán)境配置及變量識(shí)別規(guī)則
這篇文章主要為大家介紹了Vite多環(huán)境配置時(shí)間及vite識(shí)別環(huán)境變量的規(guī)則,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要介紹了vue-cli安裝使用less的教程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue中靜態(tài)文件引用的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了vue中靜態(tài)文件引用的注意事項(xiàng)及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了Vue中的單向數(shù)據(jù)流原則,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
npm install報(bào)錯(cuò)缺少python問(wèn)題及解決
這篇文章主要介紹了npm install報(bào)錯(cuò)缺少python問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06