vue2.0 解决抽取公用js的问题


Posted in Javascript onJuly 31, 2020

首先创建公用js

在static中创建js—>utils.js

vue2.0 解决抽取公用js的问题

utils.js内容如下:

export default {
 install(Vue, options) {
  Vue.prototype.formatDuring = function (mss) {
   var days = parseInt(mss / (1000 * 60 * 60 * 24));
   var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
   var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
   var seconds = (mss % (1000 * 60)) / 1000;
   return days + " 天 " + hours + " 小时 " + minutes + " 分 " + Math.round(seconds) + " 秒 ";
  }
 }

}

在main.js中引入,以便全局使用

// 引入公用js
import utils from '../static/js/utils.js' 
Vue.use(utils);

在需要的地方使用

endline = this.formatDuring(currentTime);

ok!

补充知识:VUE 创建共通js 以及引用该js的共通方法

一个方法被多个js函数多次调用,为了减少代码量以及方便后期维护,创建一个公用的js类。

commonUtil 共通类

// 共通类
let commonUtil = {
};
 
commonUtil.openLogin = function (terminal) {
  console.log("i am is js mathod;" + terminal);
};
 
export default commonUtil;

其他js调用

首先引入该类

import commonUtil from "../../../src/utils/commonUtil";

其次调用共通类里面的openLogin方法

commonUtil.openLogin("Hello VUE");

运行结果:

vue2.0 解决抽取公用js的问题

以上这篇vue2.0 解决抽取公用js的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
vue实现公共方法抽离
Jul 31 #Javascript
js实现无缝轮播图插件封装
Jul 31 #Javascript
原生js滑动轮播封装
Jul 31 #Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 #Javascript
jquery轮播图插件使用方法详解
Jul 31 #jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 #Javascript
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
You might like
php横向重复区域显示二法
2008/09/25 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
Vue实现验证码功能
2019/12/03 Javascript
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python实现单向链表详解
2018/02/08 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
如何通过Python实现标签云算法
2019/07/02 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Python socket服务常用操作代码实例
2020/06/22 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
文秘专业应届生求职信范文
2013/11/14 职场文书
中学校庆方案
2014/03/17 职场文书
教学质量评估实施方案
2014/03/17 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2015年维修工作总结
2015/04/25 职场文书
教师培训简讯
2015/07/20 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
一条 SQL 语句执行过程
2022/03/17 MySQL
源码安装apache脚本部署过程详解
2022/09/23 Servers