国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

waterc / 2181人閱讀

摘要：定義全局插件的步驟定義全局插件的插件應(yīng)當(dāng)有一個(gè)公開(kāi)方法。這個(gè)方法的第一個(gè)參數(shù)是構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象具體種方式，寫(xiě)在此處里引入并使用組件內(nèi)調(diào)用全局插件的種方式請(qǐng)謹(jǐn)慎使用全局混入，因?yàn)樗鼤?huì)影響每個(gè)多帶帶創(chuàng)建的實(shí)例包括第三方組件。

定義全局插件的步驟

1.定義全局插件 pluginsUtil.js
Vue.js 的插件應(yīng)當(dāng)有一個(gè)公開(kāi)方法 install 。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象：

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

2.main.js里引入并使用

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

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

vue全局插件的4種方式 
請(qǐng)謹(jǐn)慎使用全局混入，因?yàn)樗鼤?huì)影響每個(gè)多帶帶創(chuàng)建的 Vue 實(shí)例 (包括第三方組件)。
推薦使用：模塊化的導(dǎo)出、導(dǎo)入

1.Vue.mixin 方式
注冊(cè)全局混合對(duì)象

        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 方式
定義全局過(guò)濾器

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

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

        Vue.directive("myfocus", {
            // 當(dāng)綁定元素插入到 DOM 中。
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        })

詳細(xì)代碼見(jiàn)github倉(cāng)庫(kù)：https://github.com/cag2050/vu...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/92010.html

相關(guān)文章

  • 前端開(kāi)發(fā)之走進(jìn)Vue.js

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

    zxhaaa 評(píng)論0 收藏0

  • Vue 混合、自定義指令、插件

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

    whlong 評(píng)論0 收藏0

  • 從開(kāi)發(fā)到發(fā)布一款基于Vue2x的圖片預(yù)覽插件

    摘要：項(xiàng)目地址先來(lái)看下關(guān)于開(kāi)發(fā)插件的幾種方式具體請(qǐng)移步官網(wǎng)官網(wǎng)添加全局方法或?qū)傩赃壿嬏砑尤仲Y源邏輯注入組件邏輯添加實(shí)例方法邏輯我采用第一種方式來(lái)編寫(xiě)這個(gè)插件第一步創(chuàng)建項(xiàng)目你的項(xiàng)目名稱具體操作不在贅述開(kāi)始插件開(kāi)發(fā)，編寫(xiě)這段代碼很重要編 項(xiàng)目地址: vue-picture-viewer 先來(lái)看下Demo LiveDemo showImg(https://segmentfault.com/img...

    ivydom 評(píng)論0 收藏0

  • 讀?VuePress（四）插件機(jī)制的設(shè)計(jì)

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

    April 評(píng)論0 收藏0

  • 使用vue自定義指令開(kāi)發(fā)一個(gè)表單驗(yàn)證插件validate.js

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

    warnerwu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<