vue 插件
开发插件
插件通常会为vue添加全局功能,插件的范围没有限制--一般有下面几种:
1,添加全局方法或者属性,例:vue-coustom-element
2,添加全局资源:指令、过滤器,、过渡等,如vue-touch;
3,通过全局mixin方法添加一些组件选项,如:vue-router;
4,添加vue实例方法,通过把它们添加到vue.property上实现。
5,一个库,提供自己的api,同时提供上面提到的一个或多个功能,如,vue-router.
vue的插件应当有一个公开的方法install。这个方法的第一个参数是vue构造器,第二个参数是一个可选的选项对象:
MyPlugin.install = function(vue,options){
//1.添加全局方法或属性
Vue.myGlobalMethod = function(){
//逻辑
}
//添加全局资源
vue.directive('my-directive',{
bind(el,binding,vnode,oldVnode){
//逻辑
}
})
//注入组件
Vue.mixin({
created:function(){
//逻辑
}
})
//添加实例方法
Vue.prototype.$myMethod = function(methodOptions){
//逻辑
}
}
使用插件
通过全局方法vue.use()使用插件
//调用MyPlugin.install(vue)
Vue.use(MyPlugin);
也可以传入一个选项对象:
Vue.use(MyPlugin,{someOption:true})
Vue.use会自动阻止注册相同插件多次,届时只会注册一次该插件。
Vue.js官方提供的一些插件(例:vue-router)在检测到Vue是可访问的全局变量时会自动调用Vue.use()。然而在例如Commonjs的模块环境中,你应该显式的调用Vue.use()。
//用browserify或webpack提供的commonjs模块环境
var Vue = require('vue');
var VueRouter = require('vue-router')
//不要忘了调用vue.use(VueRouter)
awesome-vue 集合了来自社区贡献的数以千计的插件和库。
vue 插件的更多相关文章
- vue插件编写与实战
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...
- 第一个Vue插件从封装到发布
前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...
- 手把手教你写vue插件并发布(二)
前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...
- VUE插件大总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- vue插件大全汇总
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
- VUE插件总结
亲们支持我的新博客哦==>地址(以后更新会尽量在新博客更新,欢迎大家访问加入我的后宫w) ) UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和W ...
- Vue插件plugins的基本操作
前面的话 本文将详细介绍Vue插件plugins的基本操作 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 1.添加全局方法或者属性,如: vue-custom- ...
- 把axios封装为vue插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- Vue插件写、用详解(附demo)
出处http://blog.csdn.net/qq20004604 Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共 ...
- 推荐 VSCode 上特别好用的 Vue 插件 - vetur
作者 @octref 此前 V2EX 发过帖子,最近新增代码补全功能,综合比较应该是目前 VSCode 上面最好用的 Vue 插件. 能够实现在 .vue 文件中: 语法错误检查,包括 CSS/SCS ...
随机推荐
- Django 工作流程
一.Django 工作流程 在开始具体的代码之旅前,先来宏观地看下Django是如何处理Http Resquest的,如下图: 假设你已经在浏览器输入了 http://127.0.0.1:8000/p ...
- ISP图像调试工程师——对比度增强(熟悉图像预处理和后处理技术)
经典对比度增强算法: http://blog.csdn.net/ebowtang/article/details/38236441
- MySQL : ERROR 1042 (HY000): Can't get hostname for your address
摘自: http://www.siutung.org/post/506/ 使用Navicat for MySQL连接远程的MySQL服务器,却提示:Can't get hostname for you ...
- 使用MyEclipse 2014构建Maven项目的两种方法
前提: MyEclipse已配置Maven,具体步骤见http://blog.csdn.net/haishu_zheng/article/details/51492491 方法一: 1 File--& ...
- 练oj时的小技巧(大多都在oj记录里,这是被忘记的部分)
1. getline()函数,头文件为#include<string> getline(istream &in, string &s):从输入流读入一行到string s ...
- 【笔记】探索js 的this 对象 (第一部分)
最近在看 你不知道的javascript 这本书,在第二部分看到了一个比较重要的知识点 那就是 this对象的全面认识,于是做一下笔记 博主本人在看这本书之前也一直以为 this 是指一切引用类型的本 ...
- DevExpress 项目目录列表参考(收集的 350个cs project)
DevExpress.ExpressApp.Tools\DBUpdater\DBUpdater.csproj DevExpress.BonusSkins\DevExpress.BonusSkins.c ...
- dhclient 简介
dhclient 就和它名字一样,用来通过 dhcp 协议配置本机的网络接口. 使用方法就是 #dhclient ifN # ifN 就是 ifconfig 中输出的接口名称,etc. eth0,wl ...
- 易语言调用csharp写的COM组件的程序在Win2008上奔溃的解决办法
易语言调用csharp写的COM组件,除了要注册csharp写的dll之外(由于是.net代码,需要用.net自带的注册工具RegAsm.exe注册,具体注册方法为: C:\WINDOWS\Micro ...
- android精确绘制文字位置的方法
android 中使用Canvas的drawText绘制文本的位置,是基于基线的. 例如以下图: 当中字母Q的小尾巴在横线以下了. 怎么样找准字母的中心位置呢? 先看以下的样例:(右边的数字,表示字体 ...