Vue.js 的插件应当有一个公开方法 install

MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}

使用插件:

Vue.use(MyPlugin)

Vue.use(MyPlugin, { someOption: true })
// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

vue-13-插件的更多相关文章

  1. vue各种插件汇总

    https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...

  2. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  3. Vue自定义插件方法大全

    新年第一天首先祝大家新年快乐,心想事成! 1.利用根实例构造函数的原型 //在构造函数的原型链上添加自定义属性 Vue.prototype.test = 'pomelo' //在其他组件中调用 con ...

  4. vue.js及项目实战[笔记]— 03 vue.js插件

    一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...

  5. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  6. vue常用插件汇总

    UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...

  7. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

  8. 开发vue全局插件的4种方式

    定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...

  9. vue封装插件并发布到npm上

    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...

  10. VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

随机推荐

  1. html5 history 信息api pushState

    这个功能可以进行传参,还可以解决ajax无法前进和倒退的问题 首先,history新增的两个方法history.replaceState()和history.pushState()方法属于HTML5浏 ...

  2. Unity --- 纹理为什么要设置为2的N次方

    1.图片的纹理像素在Unity3D中需要遵循2的N次方,由图形学决定的,只识别2的N次方.   非2的N次方的图片会转化为2的N次方图片(500 x 500 → 512 x 512),是因为转化过程比 ...

  3. lombok插件:Data自动get/set方法, Slf4j实现Logger的调用

    lombok插件:Data自动get/set方法, Slf4j实现Logger的调用 lombok.Data import lombok.Data; import org.hibernate.anno ...

  4. centos7: 将nginx,php-fpm加入开机启动

    1. 自己新建一个脚本,如centnet-service.sh 经过后面的几个步骤后,这个脚本在开机的时候会执行,在这个脚本里面可以写你开机的时候想执行的命令,如启动nginx,phpf-pm等服务 ...

  5. RNA Spike-in Control(转)

    Spike-in Control:添加/加入(某种物质)的对照(组)在某些情况下,待检验样本中不含待测物质或者含有但是浓度很低,为了证明自己建立的方法能对样本中待测物质进行有效的检测,可在待检样本中加 ...

  6. Shell脚本字体颜色

    [root@web01 scripts]# man console_codesecho -e "\033[背景颜色:字体颜色m字符串\033[0m",例:echo -e " ...

  7. (GoRails) 使用ActiveStorage给user添加上传头像功能。

    对activestorage的简单使用: 头像库:uifaces.co. 可以使用大量设置好的头像图片. 1.安装avatar rails active_storage:install 2.user ...

  8. 2019/01/17 对django项目部署的学习

    前记:最近在学习django项目的部署. 开发环境:windows10,使用pycharm,python2.7.15,django1.11.本地测试使用nginx和前端交互. 生产环境:centos7 ...

  9. android -------- 蓝牙Bluetooth

    什么是蓝牙? 也可以说是蓝牙技术.所谓蓝牙(Bluetooth)技术,实际上是一种短距离无线电技术,是由爱立信公司公司发明的.利用“蓝牙”技术,能够有效地简化掌上电脑.笔记本电脑和移动电话手机等移动通 ...

  10. 集合 (set)

    set 是一个无序不重复的元素集,集合跟字典是无序的,不支持索引 创建集合: 第一种方式:通过{ }创建 >>> num={1,2,3,4,3,3,1} >>> n ...