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在exlipse中设置自动提示的方法
Apr 07 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
javascript中expression的用法整理
May 13 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
python如何获取服务器硬件信息
2017/05/11 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python实现顺时针打印矩阵
2019/03/02 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python ATM功能实现代码实例
2020/03/19 Python
python批量修改交换机密码的示例
2020/09/22 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
数控技术学生的自我评价
2014/02/15 职场文书
项目建议书范文
2014/05/12 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
银行奉献演讲稿
2014/09/16 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
欢迎家长标语
2014/10/08 职场文书
2014年业务工作总结
2014/11/17 职场文书
微信早安问候语
2015/11/10 职场文书
Python List remove()实例用法详解
2021/08/02 Python