開發(fā)vue全局插件的4種方式

waterc 發(fā)布于2019-08-22 11:14 / 2179人閱讀

摘要：定義全局插件的步驟定義全局插件的插件應當有一個公開方法。這個方法的第一個參數(shù)是構造器，第二個參數(shù)是一個可選的選項對象具體種方式，寫在此處里引入并使用組件內(nèi)調(diào)用全局插件的種方式請謹慎使用全局混入，因為它會影響每個多帶帶創(chuàng)建的實例包括第三方組件。

定義全局插件的步驟

1.定義全局插件 pluginsUtil.js
Vue.js 的插件應當有一個公開方法 install 。這個方法的第一個參數(shù)是 Vue 構造器，第二個參數(shù)是一個可選的選項對象：

export default {
    install (Vue, options) {
        // 具體4種方式，寫在此處
    }
}

2.main.js里引入并使用

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

3.組件內(nèi)調(diào)用

vue全局插件的4種方式

請謹慎使用全局混入，因為它會影響每個多帶帶創(chuàng)建的 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創(chuàng)建對象的幾種方式

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92010.html

前端開發(fā)之走進Vue.js

摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發(fā)前端項目的新的思維模式。的新版本，的簡稱。的包管理工具，用于同一管理我們前端項目中需要用到的包插件工具命令等，便于開發(fā)和維護。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發(fā)前端項目的新的思維模式。本文旨在幫助大家認識Vue.js，了解Vue.js的開發(fā)流程，并進一步理解如何通...

zxhaaa 2019-08-20 15:20 評論0 收藏0
Vue 混合、自定義指令、插件

摘要：當組件和混合對象含有同名選項時，這些選項將以恰當?shù)姆绞交旌献远x指令除了默認設置的核心指令和也允許注冊自定義指令。 vue的復用性與組合混合混合 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。當組件和混合對象含有同名選項時，這些選項將以恰當?shù)姆绞交旌? ...

whlong 2019-08-21 16:17 評論0 收藏0
從開發(fā)到發(fā)布一款基于Vue2x的圖片預覽插件

摘要：項目地址先來看下關于開發(fā)插件的幾種方式具體請移步官網(wǎng)官網(wǎng)添加全局方法或屬性邏輯添加全局資源邏輯注入組件邏輯添加實例方法邏輯我采用第一種方式來編寫這個插件第一步創(chuàng)建項目你的項目名稱具體操作不在贅述開始插件開發(fā)，編寫這段代碼很重要編項目地址: vue-picture-viewer 先來看下Demo LiveDemo showImg(https://segmentfault.com/img...

ivydom 2019-08-22 17:13 評論0 收藏0
讀?VuePress（四）插件機制的設計

前言從 9 月份開始，vuepress 源碼進行了重新設計和拆分。先是開了個 next 分支，后來又合并到 master 分支，為即將發(fā)布的 1.x 版本做準備。最主要的變化是：大部分的全局功能都被拆分成了插件的形式，以可插拔的方式來支撐 vuepress 的運作，這一點很像 webpack。具體架構如下： showImg(https://user-gold-cdn.xitu.io/2019...

April 2019-05-22 16:41 評論0 收藏0
使用vue自定義指令開發(fā)一個表單驗證插件validate.js

摘要：今天就來介紹一下如何利用的自定義指令來開發(fā)一個表單驗證插件的過程。按照這種方式就能夠使用自己開發(fā)的這個表單校驗插件。這段時間在進行一個新項目的前期搭建，新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量，所以基本沒有使用額外的ui組件，有時候我們需要的一些基礎組件我就直接自己開發(fā)了。今天就來介紹一下如何利用vue的自定義指令directive來開發(fā)一個表單驗證插件的過...

warnerwu 2019-05-23 17:26 評論0 收藏0