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 相关文章推荐
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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
sphinx增量索引的一个问题
2011/06/14 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python正则表达式re之compile函数解析
2017/10/25 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
艺术设计专业毕业生推荐信
2014/07/08 职场文书
庆元旦演讲稿
2014/09/15 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
房产分割协议书范文
2014/11/21 职场文书
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技