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 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
详解Vue的options
May 15 Vue.js
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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
Python中内建函数的简单用法说明
2016/05/05 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Python是怎样处理json模块的
2020/07/16 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
后勤服务中心总经理工作职责
2014/03/03 职场文书
2014年党课学习材料
2014/05/11 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
入党个人总结范文
2015/03/02 职场文书
微信早安问候语
2015/11/10 职场文书