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 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
mpvue将vue项目转换为小程序
Sep 30 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 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 max_execution_time执行时间问题
2011/07/17 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php数组键值用法实例分析
2015/02/27 PHP
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
json的使用小结
2016/06/08 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
Python3遍历目录树实现方法
2015/05/22 Python
python运行其他程序的实现方法
2017/07/14 Python
Python批量更改文件名的实现方法
2017/10/29 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python 为什么说eval要慎用
2019/03/26 Python
简单了解python列表和元组的区别
2020/05/14 Python
Python requests上传文件实现步骤
2020/09/15 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
电台实习生求职信
2014/02/25 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
机关办公室岗位职责
2014/04/16 职场文书
医师定期考核实施方案
2014/05/07 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
python 学习GCN图卷积神经网络
2022/05/11 Python