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 相关文章推荐
Javascript 刷新全集常用代码
Nov 22 Javascript
js加强的经典分页实例
Mar 15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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中去除所有js,html,css代码
2010/10/12 PHP
php表单提交实例讲解
2015/11/12 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
css配合jquery美化 select
2013/11/29 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
Python对象体系深入分析
2014/10/28 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
中秋节国旗下演讲稿
2014/09/05 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript
Mysql开启外网访问
2022/05/15 MySQL
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python