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 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 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
php PDO中文乱码解决办法
2009/07/20 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
PHP编写简单的App接口
2016/08/28 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
基于python log取对数详解
2018/06/08 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
中医临床专业自我鉴定范文
2014/01/15 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
安全教育第一课观后感
2015/06/17 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python