vue项目能够使用很多插件来丰富自己的功能,例如Vue-Router、Vuex……,这么多插件供我们使用,节省了我们大量的人力和物力,那这些插件是开发出来的呢?是不是我们自己也想拥有一个属于自己的vue插件,下面就展示一下如何写一个自己的Vue插件。
Vue插件可以是一个包含install方法的Object对象,此时插件被调用时会调用install方法,如下所示:
export default {
// 接收两个参数
// app: 应用上下文的实例
// options:插件输入的选项
install: (app, options) => {
console.log('app', app);
console.log('options', options);
// 做一些处理
// ……
}
}
Vue插件也可以是一个function函数,此时插件被调用时会调用function函数本身,如下所示:
export default function TestPlugin(app, options) {
console.log('app', app);
console.log('options', options);
}
上述已经阐述了如何编写自己的插件,插件编写完了之后就需要使用这些插件了,那这些插件应该如何使用呢?其实用起来很简单,应用上下文的实例上提供了对应的use方法。
app.use(plugin, [options]); // 返回一个应用实例,所以其可以链式添加新的插件
为什么app.use()可以使用这些插件呢?本着“知其然而知其所以然”的精神,一起来扒一扒为什么。如下是对应的源码:
function createApp(rootComponent, rootProps = null) {
// ……
const installedPlugins = new Set();
const app = (context.app = {
// ……
use(plugin, ...options) {
if (installedPlugins.has(plugin)) {
warn(`Plugin has already been applied to target app.`);
}
else if (plugin && shared.isFunction(plugin.install)) {
installedPlugins.add(plugin);
plugin.install(app, ...options);
}
else if (shared.isFunction(plugin)) {
installedPlugins.add(plugin);
plugin(app, ...options);
}
else {
warn(`A plugin must either be a function or an object with an "install" ` +
`function.`);
}
return app;
},
// ……
});
return app;
};
上述代码读起来很简单,其实现了以下几件事情:
来源: 前端点线面
向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等
作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码
jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。
这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等
在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue
在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集
常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。
安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为
使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!