创建自己的插件似乎是一项高级技术,但实际上比你想象的要简单得多。
本文目录
-
1.如何设置插件
-
2.向插件添加功能
-
2.1构建你的第一个插件
-
2.2安装插件
-
2.让它真正有用
-
2.1声明全局属性
-
2.2定义实例属性
-
2.3建立全局过滤器
-
2.4添加自定义指令
-
2.5合并选项对象
-
2.6我们最终的插件
-
获取完整项目代码代码
让我们开始吧!
1.如何设置插件
从广义上讲,我们的插件只是一个公开 install
方法的Javascript模块。该方法有两个参数
-
Vue构造函数
-
选项的对象
在我们的Vue项目中,在 src/plugins
中创建一个新文件夹。
然后,在新文件夹中,我们实际上可以创建我们的插件文件。在本教程中,我将其命名为 first-plugin.js
在我们的新插件文件中,我们应该遵循典型的ES6模块模式,也就是整个 export default
,这使我们能够从其文件中导出插件,并允许其他文件导入它。
接下来,就像我们之前讨论的那样,我们的插件必须公开 install(Vue, options)
方法。这是安装插件时Vue实际调用的。
因此,现在 first-plugin.js
的代码应该是这样的:
export default { // 被Vue.use(FirstPlugin) install(Vue, options) { } }
现在,让我们实际在此代码中添加一些内容。
既然我们已经建立了插件的框架,我们就可以开始构建它了。我们可以使用几种不同的选项来添加功能,目前,我们只介绍一种简单快捷的方法(不用担心,稍后我将介绍更高级的技术)。
2.1构建你的第一个插件
一种查看我们的插件运行情况的简单方法是创建一个全局mixin,它将包含在所有Vue实例中。使用 Vue.mixin
函数可以做到这一点。
本质上,它们使您可以注入其他组件选项,它们是提取和重用组件之间通用功能的好方法,Mixins还允许您的插件访问Vue生命周期钩子。
要将mixin添加到插件,我们在 Vue.mixin
函数内声明其他组件选项。首先,我刚刚添加了一个带有 console.log
语句的生命周期钩子。
现在,我们的插件代码应如下所示。
// first-plugin.js export default { // 调用 Vue.use(FirstPlugin) install(Vue, options) { // 创建一个 mixin Vue.mixin({ created() { console.log(Vue); } }); } }
2.2安装插件
如果您现在要运行项目,则会注意到没有任何变化,那是因为我们尚未安装插件。
幸运的是,这是一个非常简单的过程。在 src/main.js
文件中,即声明我们的Vue构造函数的文件中,我们只需导入并安装插件文件即可。
// main.js import FirstPlugin from "./plugins/first-plugin.js"; Vue.use(FirstPlugin);
Vue.use
的一大优点是可以确保你的插件仅安装一次。如果你不小心添加了两次,它会减慢你的应用程序,可能还会搞砸一些功能。
最后,我们已经安装了插件。现在,如果我们运行项目并检查日志,我们应该在控制台中看到一些输出。
2.让它真正有用
太棒了!你已正式创建了第一个插件,但这实际上并没有做任何有用的事情。
让我们来看看一些让插件发挥功能的简洁方法。
2.1声明全局属性
全局数据/方法是一种向代码添加普遍功能的有用方法,这也非常容易做到。假设我们希望我们的应用程序的当前版本为全局属性,会是这样的:
// first-plugin.js install(Vue, options) { // 定义全局顺序 Vue.VERSION = 'v2.0.3'; }
要注意的一件事是过度使用全局变量,很容易将全局范围挤得太满,使其难以使用。
2.2定义实例属性
这是我最喜欢的添加插件的方法之一。实例属性是将数据和方法添加到Vue项目的便捷方法,我更喜欢使用实例属性,以保持全局范围的整洁和易于理解。
在此示例中,我刚刚创建了一个实例方法,该方法将一个字符串放在 <i>
标记内。
注意: $
不是必需的语法;这只是Vue用于实例属性以避免冲突的命名约定。
// first-plugin.js // 定义实例属性 Vue.prototype.$italicHTML = function (text) { return '<i>' + text + '</i>'; }
然后,我们可以在任何这样的实例中使用它
// Component.vue <div v-html='$italicHTML(content)'></div>
2.3建立全局过滤器
过滤器是我最喜欢的技术之一,因为它们使文本转换变得如此容易。同样,我们所要做的就是调用Vue构造函数方法Vue。在我们的整个Vue项目中,我们有一个可重复使用的全局过滤器。
假设我们要使用过滤器来根据较长的文本生成预览代码段,我们在插件中这个事情。
// first-plugin.js // 建立全局过滤器 Vue.filter('preview', (value) => { if (!value) { return ''; } return value.substring(0, userOptions.cutoff) + '...'; })
2.4添加自定义指令
自定义指令 是对特定元素进行底层DOM访问的好方法。
查看VueJS文档中的示例,让我们在插件内部创建一个自定义指令,该指令可自动将元素聚焦在页面上。
在install方法内部,我们只需要使用 Vue.directive
方法来声明我们的新指令。
// first-plugin.js // 添加自定义指令 Vue.directive('focus', { // 当绑定元素被插入到DOM中时… inserted: function (el) { el.focus(); } })
然后,我们可以把它加到一个元素上。这是我们自动将文本输入聚焦在页面加载上的方式。
// Component.vue <input type='text' placeholder='Type...' v-focus />
2.5合并选项对象
至此,我们还没有涉及install方法的第二个参数,此方法使您的插件在不同情况下更加灵活。
为了使用 options
对象,我们首先必须向我们的插件传递一些选项。
使用 options
对象时,一种最佳实践是创建一些默认值。为此,我们可以在插件文件中私下定义默认选项对象,然后使用Javascript的扩展语法将默认选项与参数选项合并,从而实现这一点。
回顾前面的示例,假设我们希望添加一个选项来设置文本预览的截止点。大概是这样的:
// first-plugin.js const defaultOptions = { cutoff: 50 }; export default { install(Vue, options) { // 合并默认选项与arg选项 let userOptions = {...defaultOptions, ...options}; // 剩余插件代码 } }
现在,即使没有任何选项传递给插件,它仍将使用默认值运行。
使用options对象时,一种最佳实践是创建一些默认值。
如果我们确实想传递选项,那很简单。在 src/main.js
文件中,我们要做的就是在 Vue.use
方法中添加第二个参数。此参数将是一个选项对象。
// main.js Vue.use(FirstPlugin, { cutoff: 100 });
因为我们将参数选项放在扩展语法的右侧,所以它会覆盖默认值。
2.6我们最终的插件
在实现这些技术之后,这是我们最终的插件代码。
// first-plugin.js const defaultOptions = { cutoff: 50 }; export default { // 被Vue.use(FirstPlugin) install(Vue, options) { let userOptions = { ...defaultOptions, ...options }; // create a mixin Vue.mixin({ created() { console.log(Vue); } }); // 定义全局属性 Vue.VERSION = "v2.0.3"; Vue.prototype.$italicHTML = function(text) { return "<i>" + text + "</i>"; }; // 建立全局过滤器 Vue.filter("preview", value => { if (!value) { return ""; } return value.substring(0, userOptions.cutoff) + "..."; }); // 添加自定义指令 Vue.directive("focus", { // 当绑定元素被插入到DOM中时… inserted: function(el) { el.focus(); } }); } };
就功能而言,此插件绝对遍地都是。但是,如果你遵循了本文的内容,那么你现在已经熟悉了构建更高级插件所需的大多数 工具 、方法和技术。
获取完整项目代码代码
公众号中回复关键字: vue-plugin-1
推荐阅读:
感谢您的阅读和关注,看完三件事:
如果对你有帮助,帮忙文章右下角点个 在看 如果有什么问题欢迎 留言 交流,还可以 转发 ,这是对作者最大的帮助。
以上所述就是小编给大家介绍的《温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数学建模算法与应用
司守奎、孙玺菁 / 国防工业出版社 / 2011-8 / 49.00元
《数学建模算法与应用》主要内容简介:作者司守奎、孙玺菁根据多年数学建模竞赛辅导工作的经验编写《数学建模算法与应用》,涵盖了很多同类型书籍较少涉及的新算法和热点技术,主要内容包括时间序列、支持向量机、偏最小二乘面归分析、现代优化算法、数字图像处理、综合评价与决策方法、预测方法以及数学建模经典算法等内容。《数学建模算法与应用》系统全面,各章节相对独立。《数学建模算法与应用》所选案例具有代表性,注重从不......一起来看看 《数学建模算法与应用》 这本书的介绍吧!