开发插件

插件通常会为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. Markdown基本用法

    Markdown基本用法 不同的编辑器对本文中的功能可能显示情况不一样,马克飞象可以完美支持和显示. 一.标题 h1标题 #h1标题 h1标题 h1标题 == h2标题 ##h2标题 h2标题 h2标 ...

  2. virtualenv -- python虚拟沙盒

    有人说:virtualenv.fabric 和 pip 是 pythoneer 的三大神器. 不管认不认同,至少要先认识一下,pip现在倒是经常用到,virtualenv第一次听说,不过,总得尝试一下 ...

  3. C#winform控制textbox输入只能为数字

    添加keyPress事件,控制键盘输入只能是自然数: /// <summary> /// 控制键盘输入只能是自然数 /// </summary> /// <param n ...

  4. xenserver+starwind架构布署

    主机 CPU 和主板均需支持 INTER-VT/ AMD-VT ,主板默认可能没开  进BISO开启  下载最新的 xenserver ,授权注册一下 轻松得到授权文件 (鄙视一下VMWARE,看人家 ...

  5. Nginx Location 语法,与简单配置[转]

    一、介绍Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,Nginx,它的发音为“engine X”, 是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/SMTP 代理服务器 ...

  6. 不遗留问题-menu数据拼装

    DROP TABLE IF EXISTS `menu0910`; CREATE TABLE `menu0910` ( `id` ) NOT NULL AUTO_INCREMENT, `menu` ) ...

  7. Linux的权限说明

    Linux的权限不是很细致,只有RWX三种r(Read,读取):对文件而言,具有读取文件内容的权限:对目录来说,具有浏览目录的权限.w(Write,写入):对文件而言,具有新增,修改,删除文件内容的权 ...

  8. docker learning

    Docker 配置文件位置 Docker 的配置文件可以设置大部分的后台进程参数,在各个操作系统中的存放位置不一致 在 ubuntu 中的位置是:/etc/default/docker 在 cento ...

  9. freebsd上安装nginx+php记录

    参考文章 https://wiki.freebsdchina.org/faq/ports http://www.vpsee.com/2014/04/install-nginx-php-apc-mysq ...

  10. mssql 常用SQL语句或函数

    按 OrderDate 的顺序计算 SalesOrderHeader 表中所有行的行号,并只返回行 50 到 60(含). WITH OrderedOrders AS ( SELECT SalesOr ...