Vue.2.0.5-插件
开发插件
插件通常会为Vue添加全局功能。插件的范围没有限制——一般有下面几种:
添加全局方法或者属性,如: vue-element
添加全局资源:指令/过滤器/过渡等,如 vue-touch
通过全局 mixin方法添加一些组件选项,如: vuex
添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
一个库,提供自己的 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 集合了来自社区贡献的数以千计的插件和库。
Vue.2.0.5-插件的更多相关文章
- 使用 Vue 2.0 实现服务端渲染的 HackerNews
Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...
- 新手入门指导:Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
- Vue 2.0初学后个人总结及分享
摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...
- vue+webpack 安装常见插件
html-webpack-plugin 插件地址:https://www.npmjs.com/package...安装指令: npm install html-webpack-plugin --sav ...
- vue全局使用axios插件请求ajax
vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...
- 新手向:Vue 2.0 的建议学习顺序
新手向:Vue 2.0 的建议学习顺序 尤雨溪 1 年前 注:2.0 已经有中文文档 .如果对自己英文有信心,也可以直接阅读英文文档.此指南仅供参考,请根据自身实际情况灵活调整.欢迎转载,请注明出 ...
- Vue 2.0 组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- [译] 尤雨溪:Vue 3.0 计划
[译] 尤雨溪:Vue 3.0 计划 原文:Plans for the Next Iteration of Vue.js作者:Evan You 发表时间:Sep 30, 2018译者:西楼听雨 发表时 ...
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
随机推荐
- [ZZ] [siggraph10]color enhancement and rendering in film and game productio
原文link:<color enhancement and rendering in film and game production> 是siggraph 2010,“Color Enh ...
- mysq数据库再次理解
1.表中的一条记录就是一个object,object有很多属性,对应表中的字段.object的属性对应的值就是字段值 2.外键是关联表关系用的.表关系的确立只能通过外键 但更高效的策略是,在数据库中部 ...
- mybatis sql in 查询(mybatis sql语句传入参数是list)mybatis中使用in查询时in怎么接收值
1.in查询条件是list时 <select id="getMultiMomentsCommentsCounts" resultType="int"> ...
- 使用PHP发送邮件的两种方法
使用PHP发送邮件的两种方法 May242013 作者:Jerry Bendy 发布:2013-05-24 22:25 分类:PHP 阅读:2,107 views 抢沙发 今天 ...
- 解决Ecshop因为动态ip问题登录后台自动退出
解决Ecshop因为动态ip问题登录后台自动退出 PHP 铁匠 2年前 (2013-07-21) 1130℃ 0评论 修改lib_base.php文件real_ip()函数,添加以下代码即可解 ...
- Rails--%w用法[转]
%Q 用于替代双引号的字符串. 当你需要在字符串里放入很多引号时候, 可以直接用下面方法而不需要在引号前逐个添加反斜杠 (\") >> %Q(Joe said: "Fr ...
- Bootstrap页面布局24 - BS旋转木马功能
代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...
- 灰度图像 Grayscale Binary_image
https://en.wikipedia.org/wiki/Grayscale https://zh.wikipedia.org/wiki/灰度图像 In photography and comput ...
- P1149 火柴棒等式
#include <bits/stdc++.h> using namespace std; const int num[] = {6, 2, 5, 5, 4, 5, 6, 3, 7, 6} ...
- kafka监控系统
Metrics-Java版的指标度量工具之一 Metrics-Java版的指标度量工具之二 JAVA Metrics 度量工具使用介绍1 JAVA Metrics度量工具 - Metrics Core ...