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 相关文章推荐
js中reverse函数的用法详解
Dec 26 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
javascript事件模型介绍
May 31 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
react 组件传值的三种方法
Jun 03 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python递归实现快速排序
2018/08/18 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
《曹刿论战》教学反思
2014/03/02 职场文书
2014庆六一活动方案
2014/03/02 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
现场施工员岗位职责
2015/04/11 职场文书
让生命充满爱观后感
2015/06/08 职场文书
2016七夕情人节感言
2015/12/09 职场文书
python实现简单反弹球游戏
2021/04/12 Python
小程序自定义轮播图圆点组件
2022/06/25 Javascript