温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

栏目: IT技术 · 发布时间: 4年前

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

创建自己的插件似乎是一项高级技术,但实际上比你想象的要简单得多。

本文目录

  • 1.如何设置插件

  • 2.向插件添加功能

    • 2.1构建你的第一个插件

    • 2.2安装插件

  • 2.让它真正有用

    • 2.1声明全局属性

    • 2.2定义实例属性

    • 2.3建立全局过滤器

    • 2.4添加自定义指令

    • 2.5合并选项对象

    • 2.6我们最终的插件

  • 获取完整项目代码代码

让我们开始吧!

1.如何设置插件

从广义上讲,我们的插件只是一个公开 install 方法的Javascript模块。该方法有两个参数

  1. Vue构造函数

  2. 选项的对象

在我们的Vue项目中,在 src/plugins 中创建一个新文件夹。

然后,在新文件夹中,我们实际上可以创建我们的插件文件。在本教程中,我将其命名为 first-plugin.js

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

在我们的新插件文件中,我们应该遵循典型的ES6模块模式,也就是整个 export default ,这使我们能够从其文件中导出插件,并允许其他文件导入它。

接下来,就像我们之前讨论的那样,我们的插件必须公开 install(Vue, options) 方法。这是安装插件时Vue实际调用的。

因此,现在 first-plugin.js 的代码应该是这样的:

export default {
   // 被Vue.use(FirstPlugin)
   install(Vue, options) {

   }
}

现在,让我们实际在此代码中添加一些内容。 2.向插件添加功能

既然我们已经建立了插件的框架,我们就可以开始构建它了。我们可以使用几种不同的选项来添加功能,目前,我们只介绍一种简单快捷的方法(不用担心,稍后我将介绍更高级的技术)。

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 的一大优点是可以确保你的插件仅安装一次。如果你不小心添加了两次,它会减慢你的应用程序,可能还会搞砸一些功能。

最后,我们已经安装了插件。现在,如果我们运行项目并检查日志,我们应该在控制台中看到一些输出。

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

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.js进阶必会,编写你的第一个Vue.js插件 看到了吗,没你想的那么难,这样就实现了你的第一个插件。

获取完整项目代码代码

公众号中回复关键字: vue-plugin-1

推荐阅读:

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件 温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

感谢您的阅读和关注,看完三件事:

如果对你有帮助,帮忙文章右下角点个 在看 如果有什么问题欢迎 留言 交流,还可以 转发 ,这是对作者最大的帮助。 温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件


以上所述就是小编给大家介绍的《温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数学建模算法与应用

数学建模算法与应用

司守奎、孙玺菁 / 国防工业出版社 / 2011-8 / 49.00元

《数学建模算法与应用》主要内容简介:作者司守奎、孙玺菁根据多年数学建模竞赛辅导工作的经验编写《数学建模算法与应用》,涵盖了很多同类型书籍较少涉及的新算法和热点技术,主要内容包括时间序列、支持向量机、偏最小二乘面归分析、现代优化算法、数字图像处理、综合评价与决策方法、预测方法以及数学建模经典算法等内容。《数学建模算法与应用》系统全面,各章节相对独立。《数学建模算法与应用》所选案例具有代表性,注重从不......一起来看看 《数学建模算法与应用》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具