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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
Javascript验证方法大全
Sep 21 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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开发的一些注意点总结
2010/10/12 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
XML的代替者----JSON
2007/07/21 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
小程序页面动态配置实现方法
2019/02/05 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Python列表list数组array用法实例解析
2014/10/28 Python
python多线程threading.Lock锁用法实例
2014/11/01 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
解决Python二维数组赋值问题
2019/11/28 Python
如何表示python中的相对路径
2020/07/08 Python
详解python变量与数据类型
2020/08/25 Python
基于Python实现粒子滤波效果
2020/12/01 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
一份Java笔试题
2012/02/21 面试题
中海讯通笔试题
2015/09/15 面试题
电子技术专业中专生的自我评价
2013/12/17 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server