开发插件

插件通常会为Vue添加全局功能。插件的范围没有限制——一般有下面几种:

  1. 添加全局方法或者属性,如: vue-element

  2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch

  3. 通过全局 mixin方法添加一些组件选项,如: vuex

  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 (options) {
// 逻辑...
}
}

使用插件

通过全局方法 Vue.use() 使用插件:

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

也可以传入一个选项对象:

Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止注册相同插件多次,届时只会注册一次该插件。

一些插件,如 vue-router 如果 Vue 是全局变量则自动调用 Vue.use() 。不过在模块环境中应当始终显式调用 Vue.use() :

// 通过 Browserify 或 Webpack 使用 CommonJS 兼容模块
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

awesome-vue 集合了来自社区贡献的数以千计的插件和库。


原文: http://vuejs.org/guide/plugins.html

Vue.2.0.5-插件的更多相关文章

  1. 使用 Vue 2.0 实现服务端渲染的 HackerNews

    Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...

  2. 新手入门指导:Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  3. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  4. Vue 2.0初学后个人总结及分享

    摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...

  5. vue+webpack 安装常见插件

    html-webpack-plugin 插件地址:https://www.npmjs.com/package...安装指令: npm install html-webpack-plugin --sav ...

  6. vue全局使用axios插件请求ajax

    vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...

  7. 新手向:Vue 2.0 的建议学习顺序

    新手向:Vue 2.0 的建议学习顺序 尤雨溪   1 年前 注:2.0 已经有中文文档 .如果对自己英文有信心,也可以直接阅读英文文档.此指南仅供参考,请根据自身实际情况灵活调整.欢迎转载,请注明出 ...

  8. Vue 2.0 组件库总结

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

  9. [译] 尤雨溪:Vue 3.0 计划

    [译] 尤雨溪:Vue 3.0 计划 原文:Plans for the Next Iteration of Vue.js作者:Evan You 发表时间:Sep 30, 2018译者:西楼听雨 发表时 ...

  10. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

随机推荐

  1. html5_d登陆界面_注册界面

    <!DOCTYPE html><html><head><script type="text/javascript">function ...

  2. Go学习记录

    操作系统:Windows 一.下载 go官网:https://golang.org/go下载地址:https://golang.org/dl/ 二.安装 安装包有msi安装版本,以及zip压缩包版本. ...

  3. PHP使用Xdebug进行远程调试

    PHP使用Xdebug进行远程调试 翻译 by mylxsw posted on 2014/07/14 under 技术文章 > 编程语言 Xdebug提供了客户端与PHP脚本进行交互的接口,这 ...

  4. 推荐25款php中非常有用的类库

    推荐25款php中非常有用的类库 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2014-09-29   作为一个PHP开发者,现在是一个令人激动的时刻.每天有许许多多有用的库分发出 ...

  5. A20VGA和lvds显示的切换-

    ./fex2bin sys_config_lvds.fex /boot/script.bin sys_config_lvds.fex的作用:配置各种外设,端口,I/O针脚信息的文件 生成 script ...

  6. [转]LaTeX处女级入门命令语法集

    1.LaTeX文件的框架如下: \documentclass{article} \begin{document} This is the body of the article \end{docume ...

  7. Solr 实现

    Solr分页与高亮(使用SolrNet实现) 本节我们使用Asp.net MVC实现Solr客户端查询,建议使用SolrNet这个客户端,开源地址在:https://github.com/mausch ...

  8. Machine Learning in Action -- 回归

    机器学习问题分为分类和回归问题 回归问题,就是预测连续型数值,而不像分类问题,是预测离散的类别 至于这类问题为何称为回归regression,应该就是约定俗成,你也解释不通 比如为何logistic ...

  9. 【转】Cocos2d - 观察者模式NotificationCenter

    http://shahdza.blog.51cto.com/2410787/1611575 [唠叨] 观察者模式 也叫订阅/发布(Subscribe/Publish)模式,是 MVC( 模型-视图-控 ...

  10. html之内联元素与块状元素;

    html之内联元素与块状元素 一.html之内联元素与块状元素 1.块状元素一般比较霸道,它排斥与其他元素位于同一行内.比如div,并且width与height对它起作用. 2.内联元素只能容纳文本或 ...