前端开发的时候,总会需要写一些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. Jmeter结构体系及运行顺序

    一:jmeter运行原理: jmeter时以线程的方式来运行的(由于jmeter是java开发的所以是运行在JVM虚拟机上的,java也是支持多线程的) 二:jmeter结构体系 1.取样器smapl ...

  2. Ubuntu安装NASM和简单的使用教程

    1. 安装 sudo apt-get install nasm 这样nasm就安装好了,终端输入命令: nasm -version 输出版本信息就说明安装成功 2. 使用 创建"hello. ...

  3. Python之单例模式的多种实现

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...

  4. [TYVJ2340] 送礼物 - 双向搜索

    题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到 ...

  5. 自力更生Collections.sort发现比较结果混乱?Comparator的锅还是强转类型导致?

    近日开发任务时间充裕一些,于是有时间回顾一下项目. 我关注到了项目中使用的七牛云的对象存储服务. 作为测试需要上传了一些图片,但七牛的控制台却无法将内容按照上传时间排序或者是按照日期查询,由于buck ...

  6. maven子项目导出成jar包及运行

    第一步:选这idea右侧栏的maven projects 第二步:选中需要打包成jar包的项目下的lifecycle 第三步:选中package 第四步:点击开始导出 第五步:使用winRAR打开ja ...

  7. 利用WinRM实现内网无文件攻击反弹shell

    利用WinRM实现内网无文件攻击反弹shell 原文转自:https://www.freebuf.com/column/212749.html 前言 WinRM是Windows Remote Mana ...

  8. LWIP移植文件介绍

    在介绍文件之前首先介绍一下DMA描述符 stm32以太网模块接收/发送FIFO和内存之间的以太网传输是通过以太网DMA使用DMA描述符完成的,一共有两个描述符列表:一个用于接收,一个用于发送, 两个列 ...

  9. opencv实践::透视变换

    问题描述 拍摄或者扫描图像不是规则的矩形,会对后期处理产生不 好影响,需要通过透视变换校正得到正确形状. 解决思路 通过二值分割 + 形态学方法 + Hough直线 +透视变换 #include &l ...

  10. 关于a标签的href属性

    今天有人问起我a标签的href属性值为 # 与 JavaScript:void(0) 有啥区别,想来也没啥可说,就简单说两句 a标签的href属性,优点有: 天然鼠标手型,以及可以被键盘focus以及 ...