Vue之封装公用变量以及实现方式


Posted in Javascript onJuly 31, 2020

阿西八!!!写久了Flutter,前端的知识真的是忘得差不多了,今天就来复习一下Vue中如何封装公用变量以及公用方法

以封装一个正则表达式为例!

第一步

创建我们的公用文件夹

Vue之封装公用变量以及实现方式

我们来看一下utils.js中的代码

class PublicMethods{
 constructor() {
  this.name = '公用变量'
 }
 verificationPhon(phone){
 // 大陆手机号码11位数,匹配格式:前三位固定格式+后8位任意数
 // 13+任意数 * 15+除4的任意数 * 18+除1和4的任意数 * 17+除9的任意数 * 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的区别是什么?

通过export抛出去的变量或者方法,使用的时候需要用{ }包裹住,来指明使用什么,而export default就方便些,抛出去后,直接用即可,可以自己试一下!

很好,我们现在已经将公用的方法以及变量抛出去了,那如何使用他呢?

首先打开我们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,接下来我们就去需要使用的页面使用它

Vue之封装公用变量以及实现方式

点击图中的验证码按钮,就可以调用我们的这个方法了,记得传入手机号

getCode(){
 console.log(this.Plugins.verificationPhon(this.phone));
}

结束了!完结!

以上这篇Vue之封装公用变量以及实现方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 事件对象的实现
Jul 13 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 #Javascript
three.js 如何制作魔方
Jul 31 #Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 #Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 #Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 #Javascript
vue实现给div绑定keyup的enter事件
Jul 31 #Javascript
简单了解JavaScript作用域
Jul 31 #Javascript
You might like
PHP禁止个别IP访问网站
2013/10/30 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
使用正则替换变量
2007/05/05 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
Python编程修改MP3文件名称的方法
2017/04/19 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
铅球加油稿100字
2014/09/26 职场文书
人事代理委托书
2014/09/27 职场文书
2014年商场工作总结
2014/11/22 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
社区活动总结范文
2015/05/07 职场文书
赢在中国观后感
2015/06/02 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书