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 相关文章推荐
读jQuery之十 事件模块概述
Jun 27 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
Node.js+Express配置入门教程
May 19 Javascript
React简单介绍
May 24 Javascript
详解jquery选择器的原理
Aug 01 jQuery
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
VUE实现图片验证码功能
Nov 18 Javascript
vue路由切换之淡入淡出的简单实现
Oct 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
如何使用Strace调试工具
2013/06/03 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
php提交post数组参数实例分析
2015/12/17 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
python对数组进行反转的方法
2015/05/20 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
python中异常捕获方法详解
2017/03/03 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
如何获取Python简单for循环索引
2019/11/21 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
给校长的建议书300字
2014/05/16 职场文书
小学领导班子对照材料
2014/08/23 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
MySQL中的隐藏列的具体查看
2021/09/04 MySQL