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 相关文章推荐
AngularJS监听路由的变化示例代码
Sep 23 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
php短信接口代码
2016/05/13 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
javascript document.referrer 用法
2009/04/30 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
python自动化发送邮件实例讲解
2021/01/04 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
毕业生求职自荐信怎么写
2014/01/08 职场文书
自我管理的活动方案
2014/08/25 职场文书
初一军训感言
2015/08/01 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
如何在C++中调用Python
2021/05/21 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python