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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
JS判断一个数是否是水仙花数
Jun 11 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
vue实现文件上传功能
Aug 13 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 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下的权限算法的实现
2007/04/28 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
javascript实现微信分享
2014/12/23 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
Python多线程实例教程
2014/09/06 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
使用K.function()调试keras操作
2020/06/17 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
职业生涯规划书的格式
2013/12/29 职场文书
英语求职信范文
2014/05/23 职场文书
新教师培训方案
2014/06/08 职场文书
企业读书活动总结
2014/06/30 职场文书
公司股东合作协议书
2014/09/14 职场文书
毕业生入职感言
2015/07/31 职场文书
新学期感想
2015/08/10 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL