开发vue全局插件的4种方式

waterc 发布于2019-08-22 11:14 / 2178人阅读

摘要：定义全局插件的步骤定义全局插件的插件应当有一个公开方法。这个方法的第一个参数是构造器，第二个参数是一个可选的选项对象具体种方式，写在此处里引入并使用组件内调用全局插件的种方式请谨慎使用全局混入，因为它会影响每个多带带创建的实例包括第三方组件。

定义全局插件的步骤

1.定义全局插件 pluginsUtil.js
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

export default {
    install (Vue, options) {
        // 具体4种方式，写在此处
    }
}

2.main.js里引入并使用

import pluginsUtil from "./pluginsUtil"
Vue.use(pluginsUtil)

3.组件内调用

vue全局插件的4种方式

请谨慎使用全局混入，因为它会影响每个多带带创建的 Vue 实例 (包括第三方组件)。
推荐使用：模块化的导出、导入

1.Vue.mixin 方式
注册全局混合对象

        Vue.mixin({
            data () {
                return {
                    someValue1: "some value1：mixin的data里的值"
                }
            }
        })

2.Vue.prototype 方式
定义 Vue 原型上的属性

        Vue.prototype.someValue2 = "someValue2：Vue.prototype上的值"
        Vue.prototype.getDate = function () {
            let dateNew = new Date()
            return dateNew
        }

3.Vue.filter 方式
定义全局过滤器

        Vue.filter("vcntFormat", function (cnt) {
            return cnt >= 100000 ? Math.floor(cnt / 10000) + "万" : cnt
        })

4.Vue.directive 方式
定义全局自定义指令

        Vue.directive("myfocus", {
            // 当绑定元素插入到 DOM 中。
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        })

详细代码见github仓库：https://github.com/cag2050/vu...

GPU云服务器云服务器 js继承的几种方式服务器请求的几种方式服务器的三种存储方式 java创建对象的几种方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92010.html

前端开发之走进Vue.js

摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...

zxhaaa 2019-08-20 15:20 评论0 收藏0
Vue 混合、自定义指令、插件

摘要：当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合自定义指令除了默认设置的核心指令和也允许注册自定义指令。 vue的复用性与组合混合混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合 ...

whlong 2019-08-21 16:17 评论0 收藏0
从开发到发布一款基于Vue2x的图片预览插件

摘要：项目地址先来看下关于开发插件的几种方式具体请移步官网官网添加全局方法或属性逻辑添加全局资源逻辑注入组件逻辑添加实例方法逻辑我采用第一种方式来编写这个插件第一步创建项目你的项目名称具体操作不在赘述开始插件开发，编写这段代码很重要编项目地址: vue-picture-viewer 先来看下Demo LiveDemo showImg(https://segmentfault.com/img...

ivydom 2019-08-22 17:13 评论0 收藏0
读 VuePress（四）插件机制的设计

前言从 9 月份开始，vuepress 源码进行了重新设计和拆分。先是开了个 next 分支，后来又合并到 master 分支，为即将发布的 1.x 版本做准备。最主要的变化是：大部分的全局功能都被拆分成了插件的形式，以可插拔的方式来支撑 vuepress 的运作，这一点很像 webpack。具体架构如下： showImg(https://user-gold-cdn.xitu.io/2019...

April 2019-05-22 16:41 评论0 收藏0
使用vue自定义指令开发一个表单验证插件validate.js

摘要：今天就来介绍一下如何利用的自定义指令来开发一个表单验证插件的过程。按照这种方式就能够使用自己开发的这个表单校验插件。这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过...

warnerwu 2019-05-23 17:26 评论0 收藏0