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 指导方针
Apr 05 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
vue地区选择组件教程详解
May 04 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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
smarty中常用方法实例总结
2015/08/07 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
node.js基础知识小结
2018/02/26 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python实现图片滑动式验证识别方法
2017/11/09 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
一行python实现树形结构的方法
2019/08/09 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python 中@property的用法详解
2020/01/15 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
python中time、datetime模块的使用
2020/12/14 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
工程采购员岗位职责
2014/03/09 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
李开复演讲稿
2014/05/24 职场文书
见习报告的格式
2014/11/04 职场文书
python如何读取和存储dict()与.json格式文件
2022/06/25 Python