温故知新 | 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插件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

如何构建敏捷项目管理团队

如何构建敏捷项目管理团队

丽萨·阿金斯 / 徐蓓蓓、白云峰、刘江华 / 电子工业出版社 / 2012-6 / 49.00元

《敏捷项目管理系列丛书•PMI-ACPSM考试指定教材•如何构建敏捷项目管理团队:ScrumMaster、敏捷教练与项目经理的实用指南》结合作者的亲身经历告诉读者如何建立一个高性能的敏捷项目管理团队,以及最终成为一名优秀的敏捷教练。作者将敏捷教练定义为导师、协助者、老师、问题解决者、冲突领航员、协作指挥者,正是这种不同角色之间的细微区别才使敏捷教练的工作富有深度。《敏捷项目管理系列丛书•PMI-A......一起来看看 《如何构建敏捷项目管理团队》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具