Vue之封裝公用變量以及實現(xiàn)方式
更新時間：2020年07月31日 10:33:52 作者：磐石BedRock
這篇文章主要介紹了Vue之封裝公用變量以及實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
阿西八！?。懢昧薋lutter，前端的知識真的是忘得差不多了，今天就來復習一下Vue中如何封裝公用變量以及公用方法
以封裝一個正則表達式為例！
第一步
創(chuàng)建我們的公用文件夾
我們來看一下utils.js中的代碼
class PublicMethods{
constructor() {
this.name = '公用變量'
}
verificationPhon(phone){
// 大陸手機號碼11位數(shù)，匹配格式：前三位固定格式+后8位任意數(shù)
// 13+任意數(shù) * 15+除4的任意數(shù) * 18+除1和4的任意數(shù) * 17+除9的任意數(shù) * 147
// 新增了166、198、199號段的手機號
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;
知識講解：
export 和 export default的區(qū)別是什么？
通過export拋出去的變量或者方法，使用的時候需要用{ }包裹住，來指明使用什么，而export default就方便些，拋出去后，直接用即可，可以自己試一下！
很好，我們現(xiàn)在已經(jīng)將公用的方法以及變量拋出去了，那如何使用他呢？
首先打開我們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的實例上面了，也就是可以全局使用這個封裝的JS，接下來我們就去需要使用的頁面使用它
點擊圖中的驗證碼按鈕，就可以調(diào)用我們的這個方法了，記得傳入手機號
getCode(){
console.log(this.Plugins.verificationPhon(this.phone));
}
結(jié)束了！完結(jié)！
以上這篇Vue之封裝公用變量以及實現(xiàn)方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue項目中axios使用方法以及原理介紹，如果你正巧學習這個知識點，那么參考下吧。2018-02-02
這篇文章主要介紹了vue實現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項目中所需要地方直接調(diào)用（mixins），本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04
vue2利用Bus.js如何實現(xiàn)非父子組件通信詳解
這篇文章主要給大家介紹了關于vue2利用Bus.js如何實現(xiàn)非父子組件通信的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧。2017-08-08
vue-baidu-map 進入頁面自動定位的解決方案(推薦)
這篇文章主要介紹了vue-baidu-map 進入頁面自動定位的解決方案,需要的朋友可以參考下2018-04-04
這篇文章主要為大家介紹了Transition內(nèi)置組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要給大家介紹了關于vue如何實現(xiàn)pc和移動端布局的相關資料, Vue響應式布局適配是一種根據(jù)設備特性自動調(diào)整布局的方法,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2023-10-10
vue從一個頁面跳轉(zhuǎn)到另一個頁面并攜帶參數(shù)的解決方法
這篇文章主要介紹了vue從一個頁面跳轉(zhuǎn)到另一個頁面并攜帶參數(shù)的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了深入理解Vue keep-alive及實踐總結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
Vue2 Element Schema Form 配置式生成表單的實現(xiàn)
本文主要介紹了Vue2 Element Schema Form 配置式生成表單的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
這篇文章主要為大家詳細介紹了vue swipe自定義組件實現(xiàn)輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07