vue -- 插件的开发与使用
开发插件
插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种:
1、添加全局方法或者属性,如: vue-custom-element。
2、添加全局资源:指令/过滤器/过渡等,如 vue-touch。
3、通过全局 mixin 方法添加一些组件选项,如: vue-router。
4、添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
5、一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router。
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:(官方例子)
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) {
// 逻辑...
}
}
其核心还是通过prototype来添加方法和属性。
使用插件
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
//也可以传入一个选项对象:
Vue.use(MyPlugin, { someOption: true })
Vue.use 会自动阻止多次注册相同插件,届时只会注册一次该插件。
此处有大量好用的插件和库 --> awesome-vue
待续……
vue -- 插件的开发与使用的更多相关文章
- 【新手】【十分钟上手系列-一】快速开发vue插件
2018.6.28 在这浮躁的前端娱乐圈,不会三两个新框架都觉得自己不是前端.哦,不是我说的.说到底.原生才是重中之重.加油. vue用了大半年多,一直在用ui库,插件等,没有自己的东西. 想想连个v ...
- 如何开发和发布一个Vue插件
前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router.vuex,还有 element-ui 提供的 notify.message 等等.这些插件让我们的开发变得更简单更高效. ...
- 【vue开发】vue插件的install方法
MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻 ...
- 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 ...
随机推荐
- python ddt 重写
对此方法重写 def mk_test_name(name, value, index=0): 重写前 index = "{0:0{1}}".format(index + 1, in ...
- 【二叉查找树】01不同的二叉查找树的个数【Unique Binary Search Trees】
当数组为1,2,3,4,...,n时,基于以下原则构建的BST树具有唯一性: 以i为根节点的树,其左子树由[1,i-1]构成,其右子树由[i+1, n]构成. 我们假定f(i)为以[1,i]能产生的U ...
- Mysql 排序null值 排序问题分析
mysql中null值的排序问题分析 如下表t_user: name age zhangsan 1 lisi NULL wangwu 2 www.2cto.com 执行一下sql: S ...
- MySQL_西安11月销售昨日未上架的产品_20161212
#C034西安11月销售昨日未上架的产品 SELECT 城市,a.订单日期,a.客户数,a.订单数,b.产品数,a.金额,c.销售确认额,c.毛利额,c.毛利率 FROM ( SELECT 城市,订 ...
- Core Data存储数据出错(This NSPersistentStoreCoordinator has no persistent stores (unknown))
Core Data存储数据的时候崩溃,崩溃信息: reason: 'This NSPersistentStoreCoordinator has no persistent stores (unknow ...
- 反编译工具Reflector下载(集成FileGenerator和FileDisassembler)
Reflector是一款比较强大的反编译工具,相信很多朋友都用过它,但reflector本身有很多局限性, 比如只能一个一个的查看方法等,但幸好reflector支持插件功能目前网上有很多reflec ...
- Apache+OpenSSL实现证书服务器提供HTTPS
通过 Linux+Apache+OpenSSL 实现 SSL ( Secure Socket Layer )证书服务器,提供安全的 HTTPS ( Hypertext Transfer Protoco ...
- HDU1698(线段树入门题)
Just a Hook Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Descrip ...
- Select\Poll\Epoll异步IO与事件驱动
事件驱动与异步IO 事件驱动编程是一种编程规范,这里程序的执行流由外部事件来规定.它的特点是包含一个事件循环,但外部事件发生时使用回调机制来触发响应的处理.另外两种常见的编程规范是(单线程)同步以及多 ...
- UML核心元素--包
包是一种容器,如同文件夹一样,将某些信息分类,形成逻辑单元.包可以容纳任何UML元素,例如用例.业务实体.类图等,也包括子包. 一.分包原则: (1)高内聚:被分入同一个包的元素相互联系紧密,伸至不可 ...