vue中注册自定义的全局js方法


Posted in Javascript onNovember 15, 2019

前端开发的时候,总会需要写一些js方法,在vue框架中为了方便使用,可以考虑注册一个全局的js方法,下面是注册步骤:

1.0 可以在assets文件中的js文件下面新建一个js文件,如:yun.js---

vue中注册自定义的全局js方法

2.0 在yun.js 上面实现日期格式方法,如下

import Vue from 'vue'
const format = (o, format) => { //日期类型
 let args = {

  "M+": o.getMonth() + 1,
  


  "d+": o.getDate(),
  


  "h+": o.getHours(),
  


  "m+": o.getMinutes(),
  


  "s+": o.getSeconds(),
  


  "q+": Math.floor((o.getMonth() + 3) / 3), //quarter
  "S": o.getMilliseconds()

 };

 if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (o.getFullYear() + "").substr(4 - RegExp.$1.length));

 for (let i in args) {
  let n = args[i];


  if (new RegExp("(" + i + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));

 }

 return format;
}
export default function(Vue) {
 //添加全局API
 Vue.prototype.$yuns = {
  format
 }
}

3.0 下面将yun.js文件注册到vue的全局中去,需要在main.js文件下面注册全局:如图下

vue中注册自定义的全局js方法

4.0 前面步骤将自定义的js注册到全局去了,后面就可以使用了,如下:

vue中注册自定义的全局js方法

已上就是在vue中注册全局的自定义js文件的步骤,以后需要添加js方法,就在yun.js加上去就可以调用了

补充:Vue自定义函数挂到全局方法

方法一:使用Vue.prototype

//在mian.js中写入函数
Vue.prototype.getToken = function (){
 ...
}
//在所有组件里可调用函数
this.getToken();

方法二:使用exports.install+Vue.prototype

// 写好自己需要的fun.js文件
exports.install = function (Vue, options) {
 Vue.prototype.getToken = function (){
  ...
 };
};
// main.js 引入并使用
import fun from './fun'
Vue.use(fun);
//在所有组件里可调用函数
this.getToken();

在用了exports.install方法时,运行报错exports is not defined

解决方法:

export default {
 install(Vue) {
  Vue.prototype.getToken = {
   ...
  }
 }
}

方法三:使用全局变量模块文件

Global.vue文件:

<script>
 const token='12345678';

 export default {
  methods: {
   getToken(){
    ....
   }
  }
 }
</script>

在需要的地方引用进全局变量模块文件,然后通过文件里面的变量名字获取全局变量参数值。

<script>
import global from '../../components/Global'//引用模块进来
export default {
 data () {
  return {
   token:global.token
  }
 },
 created: function() {
  global.getToken();
 }
}
</script>

总结

以上所述是小编给大家介绍的vue中注册自定义的全局js方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 #Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 #Javascript
微信小程序自定义导航栏(模板化)
Nov 15 #Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 #Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 #Javascript
create-react-app中添加less支持的实现
Nov 15 #Javascript
taro小程序添加骨架屏的实现代码
Nov 15 #Javascript
You might like
德生PL990的分析评价
2021/03/02 无线电
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
深入密码加salt原理的分析
2013/06/06 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Python csv文件记录流程代码解析
2020/07/16 Python
华为c/c++笔试题
2016/01/25 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
施工材料员岗位职责
2014/02/12 职场文书
教师读书活动总结
2014/05/07 职场文书
亮剑观后感500字
2015/06/05 职场文书
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技