开发插件

插件通常会为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 插件的更多相关文章

  1. vue插件编写与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...

  2. 第一个Vue插件从封装到发布

    前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...

  3. 手把手教你写vue插件并发布(二)

    前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...

  4. VUE插件大总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  5. vue插件大全汇总

    Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...

  6. VUE插件总结

    亲们支持我的新博客哦==>地址(以后更新会尽量在新博客更新,欢迎大家访问加入我的后宫w) ) UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和W ...

  7. Vue插件plugins的基本操作

    前面的话 本文将详细介绍Vue插件plugins的基本操作 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 1.添加全局方法或者属性,如: vue-custom- ...

  8. 把axios封装为vue插件使用

    前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...

  9. Vue插件写、用详解(附demo)

    出处http://blog.csdn.net/qq20004604 Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共 ...

  10. 推荐 VSCode 上特别好用的 Vue 插件 - vetur

    作者 @octref 此前 V2EX 发过帖子,最近新增代码补全功能,综合比较应该是目前 VSCode 上面最好用的 Vue 插件. 能够实现在 .vue 文件中: 语法错误检查,包括 CSS/SCS ...

随机推荐

  1. WordPress < 3.6.1 PHP 对象注入漏洞

    0x00 背景 当我读到一篇关于Joomla的“PHP对象注射”的漏洞blog后,我挖深了一点就发现Stefan Esser大神在2010年黑帽大会的文章: http://media.blackhat ...

  2. mysql之事件的开启和调用

    1.检测事件是否开启 mysql> show variables like 'event_scheduler';+-----------------+-------+| Variable_nam ...

  3. phantomjs 无法打开https网站解决方案

    最近测试原来的爬虫程序,发现phantomjs 无法打开https网站了,经过网上查下,发现需要在phantomjs定义的加以下参数 self.driver = webdriver.PhantomJS ...

  4. Spring框架学习(10)Spring中如何使用事务?

    内容源自:Spring中如何使用事务? 一.为什么要使用事务? 如果我们一个业务逻辑只执行一次sql,是不需要使用事务的.但如果要执行多条sql语句才能完成一个业务逻辑的话,这个时候就要使用事务了. ...

  5. 纯 PHP 代码最好在文件末尾删除 PHP 结束标记

    如果文件内容是纯 PHP 代码,最好在文件末尾删除 PHP 结束标记.这可以避免在 PHP 结束标记之后万一意外加入了空格或者换行符,会导致 PHP 开始输出这些空白,而脚本中此时并无输出的意图. & ...

  6. 在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的?

    如何在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的? 解决方案:将整列单元格格式设为文本,然后,选中该列,数据--分列--完成 详细步骤: (1)选中1行或者1列,再单击 ...

  7. 【MVC5】使用权限+角色

    1.在Ticket中设置用户角色 在权限的Ticket中设置用户的角色(这里是逗号分割). List<string> roles = new List<string>(); i ...

  8. PKCS7 的 attached 和 detached 方式的数字签名

    搜遍了整个网络,都没有详细的说明.只在一个页面上有介绍,还模棱两可的,地址是:http://docs.oracle.com/cd/E19398-01/820-1228/gfnmj/index.html ...

  9. STL源码剖析(迭代器)

    在STL中,容器跟算法是分开设计的,算法是通过迭代器来对容器进行操作的. 在算法运用迭代器的时候,可能会用到其相应的型别,例如返回值为容器中元素的型别,又或者说根据迭代器的类型来选择更好的算法等等. ...

  10. mac 使用apache开启https功能,实现ios局域网内测(二)

    二.创建app.plist 1. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist ...