Vue.js插件开发
Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插件的用途很广泛,从全局组件,到为应用添加一些额外的功能、如路由(Vue Router),存储在应用程序里的不可变数据(Vuex)。
一般来说,Vue插件的开发是非常简单的。Vue插件仅仅是包含一个公开方法install
的对象、这个方法有两个参数:Vue 构造器和一个可选的选项对象。尽管,插件系统看起来十分简单,但其仍然可以产生相当大的作用。
你的第一个插件
为了打开vue插件开发的大门,下面我们将先实现一个最简单的插件。这个插件的功能是:当组件被挂载到DOM后,控制台输出Mounted!
。
// 这是你的插件对象。 它可以导出到任何地方使用。
const MyPlugin = {
// install方法是必需的
// 包含两个参数:Vue 构造器,一个可选的选项对象
install(Vue, options) {
// 使用minxin将功能注入所有组件
Vue.mixin({
// 添加到mixin中的任何内容将被注入到所有组件中。
//在这个例子中, mounted() 方法将在组件被挂载到DOM后调用
mounted() {
console.log('Mounted!');
}
});
}
};
export default MyPlugin;
现在,你的插件便可以使用了。你可以通过导入并用Vue.use
来显式调用你的插件:Vue.use(MyPlugin)
import Vue from 'vue'
import MyPlugin from './my-vue-plugin.js'
import App from './App.vue'
// 在这里显式调用插件
Vue.use(MyPlugin)
new Vue({
el: '#app',
render: h => h(App)
});
你可能会奇怪,为什么我不能直接在main.js
中调用Vue.mixin()
来实现这一点呢?其原因就是:我们向Vue添加全局功能,而没有直接修改应用逻辑。拆分模块这种做法总是极好的,你可以随时添加或移除一个单独的模块。同时,这也使得插件非常容易分发。
添加一些其他的功能
安装应用范围的组件和指令
如果你想把组件或指令打包为一个插件来进行分发,可以这样写:
import MyComponent from './components/MyComponent.vue';
import MyDirective from './directives/MyDirective.js';
const MyPlugin {
install(Vue, options) {
Vue.component(MyComponent.name, MyComponent)
Vue.directive(MyDirective.name, MyDirective)
}
};
export default MyPlugin;
修改Vue构造器
你可以在插件中以你期待的方式来修改Vue构造器(全局Vue对象)。下面的代码在Vue构造器中添加了一个属性myAddedProperty
和一个方法myAddedMethod
。
const MyPlugin {
install(Vue, options) {
Vue.myAddedProperty = 'Example Property'
Vue.myAddedMethod = function() {
return Vue.myAddedProperty
}
}
};
export default MyPlugin;
修改Vue实例
不需要任何注入机制便可以将属性或方法直接添加到组件实例,你可以这样来修改Vue构造器的prototype
:
const MyPlugin {
install(Vue, options) {
Vue.prototype.$myAddedProperty = 'Example Property'
Vue.prototype.$myAddedMethod = function() {
return Vue.myAddedProperty
}
}
};
export default MyPlugin;
这些属性将会被加到所有的组件和Vue实例中。
社区里公认的做法是:添加在Vue prototype里的任何属性都要以美元符
$
作为其前缀
添加组件的生命周期钩子或属性
如上文中“你的第一个插件”示例所示,你可以通过Mixin添加生命周期钩子对Vue组件进行修改。
const MyPlugin = {
install(Vue, options) {
Vue.mixin({
mounted() {
console.log('Mounted!');
}
});
}
};
export default MyPlugin;
Mixin是一个相当重要的话题,但不在本文的讨论范围之内。目前,可以肯定的是,Mixin是一种灵活的分布式复用 Vue 组件的方式,Mixin可以包含任意组件选项并可以混合进其他组件之中。
自动安装插件
对于那些没有在应用中使用模块化系统的用户,他们往往将通过<script>
标签引用你的插件,并期待插件无需调用Vue.use()
便会自动安装 。你可以在插件最后添加如下几行代码来实现自动安装:
// 如果Vue是全局对象自动安装插件
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(MyPlugin)
}
发布你的插件
如果你已经写了一个插件,并准备将其分享到社区,下面是一些常用的帮助别人发现你的插件的方法,如果你还不熟悉这些流程的话。
向Awesome-Vue提交PR。很多人会来这里寻找插件。
(其他) Vue论坛,Vue Gitter Channel,或者在Twitter上@ #vuejs。
赶快去开发一些插件吧!
End
作者:Joshua Bemenderfer
原文地址:creating-custom-plugins
译者:jeneser
译者GitHub:https://github.com/jeneser
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
Vue.js插件开发的更多相关文章
- Vue.js 插件开发详解
前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段 ...
- Vue.js 插件开发
Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: MyPlugin.install = function (Vue ...
- vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
- Vue.js 实战总结
最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- vue.js学习笔记
有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
随机推荐
- 转载:Logistic回归原理及公式推导
转载自:AriesSurfer 原文见 http://blog.csdn.NET/acdreamers/article/details/27365941 Logistic回归为概率型非线性回归模型,是 ...
- 包含Winsock2.h出错问题
工程中添加 Winsock2.h 报错 1>c:\program files (x86)\windows kits\8.1\include\shared\ws2def.h(100): warni ...
- explicit浅谈
在C++中,explicit关键字主要用于防止隐式转换,用于修饰构造函数.复制构造函数. 例如有一个类: class A { public: A( int count ) : m_data( coun ...
- Codeforces Round #300 E - Demiurges Play Again
E - Demiurges Play Again 感觉这种类型的dp以前没遇到过... 不是很好想.. dp[u] 表示的是以u为子树进行游戏得到的值是第几大的. #include<bits/s ...
- 创建数据模型(View Models )和监控属性(Observables)
Knockout是建立在以下3个核心功能之上的: 1. 属性监控与依赖跟踪 2. 声明式绑定 3. 模版机制 在本节中,我们将学习3个核心里面的第一个.但在这之前,先让我们学习一下MVVM设计模式和V ...
- 【Java】 奇偶数的判断
判断方法(奇数): 错误判断方法:通过a%2==1来判断.(原因:负奇数对2取余的结果为-1) 正确判断方法:(1) 通过a%2!=0来判断. (2) ...
- linux 笔记(一)
1.Linux 安装3ython3 1.1 下载 wget https://www.python.org/ftp/python/3.6.2/Python-3.6.2.tgz 1.2 解压 tar -z ...
- Vsftpd支持SSL加密传输
ftp传输数据是明文,弄个抓包软件就可以通过数据包来分析到账号和密码,为了搭建一个安全性比较高ftp,可以结合SSL来解决问题 SSL(Secure Socket Layer)工作于传输层和应用程 ...
- explode() 字符串转换数组
explode() 函数把字符串分割为数组. 语法 explode(separator,string,limit) 例子: $str = "Hello world. It's a beaut ...
- 洛谷P2231 [HNOI2002]跳蚤 [数论,容斥原理]
题目传送门 跳蚤 题目描述 Z城市居住着很多只跳蚤.在Z城市周六生活频道有一个娱乐节目.一只跳蚤将被请上一个高空钢丝的正中央.钢丝很长,可以看作是无限长.节目主持人会给该跳蚤发一张卡片.卡片上写有N+ ...