第一步：首先在src文件夹里面创建一个通用js文件夹，然后在创建的文件夹里面创建一个js文件

第二步：const 一个方法，然后通过export暴露出来（在同一个页面可以写多个方法，和暴露多个方法，在export里面暴露的方法要用逗号分隔）

第三步：把方法挂载在原型上（具体操作看图）

第五步：使用，在页面的export  default 里面的生命周期里面通过this.公共方法就能使用了。

结果：

就是这么简单，你学会了吗？

3分钟教会你把封装的js公共方法挂载在vue实例原型上的更多相关文章

  1. 全局组建封装（挂载到vue实例的原型中，通过this访问）

    主题:组建的封装  一:install注册的全局封装(v-grid九宫格组建)               1.九宫格的封装主要有三个api 点击功能 每行个数 是否隐藏边框              ...

  2. vue.js（1）--创建vue实例的基本结构

    vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. react.js 公共方法 集合

    截取七牛上传图片的后缀名: export function getInputKey(info){ let self = this; let obj = JSON.parse(info); let qi ...

  4. JS 公共方法

    1.Format函数 $.GM.Format = function (source, params) { if (arguments.length == 1) return function () { ...

  5. 在普通js文件里引入vue实例的方法

    首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...

  6. js继承之组合继承（结合原型链继承 和 借用构造函数继承）

    在我的前两篇文章中,我们已经介绍了 js 中实现继承的两种模式:原型链继承和借用构造函数继承.这两种模式都存在各自的缺点,所以,我们考虑是否能将这二者结合到一起,从而发挥二者之长.即在继承过程中,既可 ...

  7. JS继承方法

    1.原型链: 每个构造函数都有一个原型对象,且有一个指针指向该原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个指向原型对象的内部指针(p ...

  8. 在JS事件封装时，addEventListener()方法的this问题

    最近在写js的类库,模仿的是jquery的编程风格,当封装到事件监听的时候发现遇到了一个问题,代码是这样的: 上面是封装的一个事件委托的代码,我以为上面的封装跟普通的事件监听一样简单,结果我在调用时发 ...

  9. 封装LocalStorage.js

    之前使用vue开发的项目频繁使用到localStorage,封装了一下 localStorage.js文件代码如下: let obj = {}; /** * putLocalStorage 把数据放到 ...

随机推荐

  1. 将html转化为canvas图片（清晰度高）的方法

    var copyDom = document.querySelector('.fenxiang1'); var width = copyDom.offsetWidth;//dom宽 var heigh ...

  2. eclipse code recommenders cannot download its model repository index

    Cent OS 7 运行 eclipse oxygen 代码提示出现标题所示的错误,解决办法,将网络提供程序设置为手动即可解决. Window->Preference->General-& ...

  3. Jmeter运行后，查看结果树中的响应数据出现中文乱码。

    参考:https://blog.csdn.net/qq_15228737/article/details/82597482 https://baike.baidu.com/item/UTF-8/481 ...

  4. charles抓包教程

    百度搜索下载charles 默认安装即可完成 1.双击charles.exe启动,我的是4.2.7版本.最好下载原版的不要去破解中文,会有不兼容 1.搜索该软件许可证书并输入即可长期使用 2.设置代理 ...

  5. 【Qt开发】V4L2 API详解 Camera详细设置

    Camera的可设置项极多,V4L2 支持了不少.但Sam之前对这些设置的用法和涵义都是在看videodev2.h中边看边理解,感觉非常生涩.直到写这篇blog时,才发现v4l2有专门的SPEC来说明 ...

  6. ZABBIX_PROXy

    ProxyMode=0 Server=172.19.30.50 ServerPort=10051 Hostname=172.17.26.102 ListenPort=10051 LogFile=/va ...

  7. Android View的Adapter

    1 Adapter适配的对象是View Adapter通过为View提供指定格式的数据来适配View,让View可以以事先约定好的方式将内容展示给用户. 所以,进行UI设计的关键是搞清楚各个View组 ...

  8. [LeetCode] 103. 二叉树的锯齿形层次遍历

    题目链接 : https://leetcode-cn.com/problems/binary-tree-zigzag-level-order-traversal/ 题目描述: 给定一个二叉树,返回其节 ...

  9. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

  10. java中关键字final，finally，finalize的区别

    -final:作为修饰符关键字,有三种用法: 1,如果一个类被声明为final,则意味着它不能被继承. 2,将变量声明为final,则表示它是一个常量,也就是保证它在使用过程中不被修改,被final修 ...