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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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
php中mysql操作buffer用法详解
2015/03/19 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
js中的闭包实例展示
2018/11/01 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python中属性和描述符的正确使用
2016/08/23 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
对python 命令的-u参数详解
2018/12/03 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
PHP统计代码行数的小代码
2019/09/19 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
保安部任务及岗位职责
2014/02/25 职场文书
打架检讨书范文
2015/01/27 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
图神经网络GNN算法
2022/05/11 Python
Hive导入csv文件示例
2022/06/25 数据库