亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

如何制作一個類似jquery插件的vue插件

Gemini / 858人閱讀

摘要：拿來寫插件，會不會太那啥請跟我念，不會，符合業(yè)務(wù)需求才是你的老板最想要的。我們生產(chǎn)了一個實例后該如何操作請跟我來寫一個實現(xiàn)。首先，我們先寫一個組件。

vue拿來寫插件，會不會太那啥？

請跟我念，“不會，符合業(yè)務(wù)需求才是你的老板最想要的?！?/p> 如何封裝一個可以全局調(diào)用的vue插件

其原理其實相當(dāng)簡單，通過new Vue(vueComponentConstructor)您可以輕松的建立一個vue實例，在該實例上您可以操作方法、操作數(shù)據(jù)、監(jiān)聽數(shù)據(jù)變化，使用各種鉤子，對開發(fā)者而言并沒有任何阻礙。

我們生產(chǎn)了一個實例后該如何操作

請跟我來,寫一個實現(xiàn)。首先，我們先寫一個vue組件。

// vue組件 A.vue

當(dāng)然，如果您的構(gòu)建系統(tǒng)不支持vue-loader和webpack,您也可以使用以下寫法

export default const Dialog = {
    name: "xxx",
    template: `
        

            // some template
        

    `,
    data () {
        return {}
    },
    methods: {}
}

第二步，生產(chǎn)api出口

// 生成調(diào)用方法
import Vue from "vue"
import A from "./A.vue"

let AConstructor = Vue.extend(A)

export default function (options = {}) {
  let instance = new AConstructor({
    data: options // 混入初始化數(shù)據(jù)，也可以直接通過merge的方式把數(shù)據(jù)插入實例對象上
  })
  instance.vm = instance.$mount()
  document.body.appendChild(instance.vm.$el)
  instance.vm.visible = true // 一些生成后的data成員操作
  return instance.vm
}

您可以將其生成單一實例，也可以每次調(diào)用生成不同實例，在關(guān)閉時調(diào)用$destroy配合destroyed或者beforeDestroy對存在頁面上的vm.$el進行銷毀。

一些提示

您可以將實例引用掛載到任何您想掛載的地方方便調(diào)用，您也可以使用Promise配合vue實例里的自定義方法或者其他方法實現(xiàn)promise鏈或者async await的靈活寫法。這都取決于您。

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93947.html

相關(guān)文章

  • 前端學(xué)習(xí)路線

    摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復(fù)制和更新庫?，F(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學(xué)習(xí)HTML基礎(chǔ) HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上： 學(xué)習(xí)HTML基礎(chǔ)，了解如何編寫語義HTML 理解如何把網(wǎng)頁分...

    FullStackDeveloper 評論0 收藏0

  • 前端學(xué)習(xí)路線

    摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復(fù)制和更新庫?，F(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學(xué)習(xí)HTML基礎(chǔ) HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上： 學(xué)習(xí)HTML基礎(chǔ)，了解如何編寫語義HTML 理解如何把網(wǎng)頁分...

    20171112 評論0 收藏0

  • 2月份前端資源分享

    摘要：月份前端資源分享更多資源請文章轉(zhuǎn)自前端生成好看的二維碼十大經(jīng)典排序算法帶動圖演示為什么知乎前端圈普遍認為游戲和展示的個人整理和封裝的庫中文詳細注釋供新手學(xué)習(xí)使用擴展語法記錄掉坑初期工具漢字拼音轉(zhuǎn)換工具實現(xiàn)漢字轉(zhuǎn)拼音的插件下拉列表支持拼音簡 2月份前端資源分享 更多資源請Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github...

    yanwei 評論0 收藏0

  • 7月份前端資源分享

    摘要：更多資源請文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機化排序算法實現(xiàn)學(xué)習(xí)筆記數(shù)組隨機排序個變態(tài)題解析上個變態(tài)題解析下中的數(shù)字前端開發(fā)筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛?cè)腴T的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfr...

    pingan8787 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<