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

1.0 可以在assets文件中的js文件下面新建一个js文件,如:yun.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文件下面注册全局:如图下

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

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

vue之注册自定义的全局js方法的更多相关文章

  1. Vue项目零碎知识(全局js,css配置,element-UI,bs使用, img动态配置,js数组)

    全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/ ...

  2. vue 全局 js 方法

    1.新增 getCurrentDataType.js 文件 import cookieUtils from '@/config/cookieUtils' function getCurrentData ...

  3. vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用

    1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...

  4. Vue中自定义指令的使用方法!

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM ...

  5. vue自定义组件(vue.use(),install)+全局组件+局部组件

    相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...

  6. jira7通过全局js给编辑区自定义快捷键【原】

    jira7编辑区自定义快捷键 本文主要描述了jira7如何通过添加全局js引用,给文本编辑区自定义快捷键用以快速填充模板内容. jira 3/4/5可参考官方api https://developer ...

  7. JS 互相调用iframe页面中js方法、VUE里 iframe 互调方法

    1,父 html 调用子 iframe 内方法: document.getElementById("iframe").contentWindow.func(data1,data2. ...

  8. Vue设置全局的方法和样式

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  9. Vue自动化注册全局组件脚本

    今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js写 Vue.component(name, instance) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比 ...

随机推荐

  1. ZGC深入学习

    ZGC简介 本次调研目标选取的是jdk11(long-term support)下首次亮相的zgc. zgc介绍简单翻译了zgc main page:ZGC简介 另外参考hotspot garbage ...

  2. 搭建YUM本地仓库

    本文介绍如何利用CentOS 7 ISO光盘镜像搭建YUM本地仓库. 环境准备: (1)VMware15.5版本虚拟机 (2)CentOS-7-x86_64-DVD-1908光盘镜像文件 1. 搭建Y ...

  3. Vue 实现点击空白处隐藏某节点(三种方式:指令、普通、遮罩)

    在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架, ...

  4. opensuse下安装redis

    1.安装gcc zypper install gcc 2.解压,安装到指定路径 sudo tar xzf redis-4.0.1.tar.gzcd redis#安装到指定目录中sudo make PR ...

  5. L2-007. 家庭房产(并查集)

    #include <cstdio> #include <set> #include <vector> #include <algorithm> usin ...

  6. netty中Pipeline的ChannelHandler执行顺序案例详解

    一.netty的Pipeline模型 netty的Pipeline模型用的是责任链设计模式,当boss线程监控到绑定端口上有accept事件,此时会为该socket连接实例化Pipeline,并将In ...

  7. {每日一题}:四种方法实现打印feibo斐波那契数列

    刚开始学Python的时候,记得经常遇到打印斐波那契数列了,今天玩玩使用四种办法打印出斐波那契数列 方法一:使用普通函数 def feibo(n): """ 打印斐波那契 ...

  8. 了解这一行的,腰包都鼓鼓的了,程序辅导,CS作业

    我们都知道计算机这类理科专业,可能你打开电脑聊几分钟微信,可能你就已经错过了成为程序员大佬的机会.就像数学专业的同学弯腰捡了一支笔,然后发现黑板被写满从此再也没有学懂数学.所以课后的作业自然也就没法顺 ...

  9. javascript严格模式的影响

    针对js严格模式会报错的编码操作进行了整理,避免不严谨的代码习惯,面向未来编程(es6+) 变量 1.定义八进制格式的数字 2.不带var的变量定义--包括函数体内的 3.对变量的delete操作-- ...

  10. Dubbo配置完全外部化实践,使用动态配置中心的注意事项

    问题描述 近期开发项目,将Dubbo的配置全部外部化到动态配置中心.这里配置中心我使用的是Apollo. @Configuration public class DubboConfig { @Bean ...