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判断DOM何时加载完毕的技巧
Nov 11 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
师范生自荐信
2013/10/27 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Python如何把不同类型数据的json序列化
2021/04/30 Python
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL