成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue中通過Vue.extend動(dòng)態(tài)創(chuàng)建實(shí)例

seanHai / 715人閱讀

摘要：中通過動(dòng)態(tài)創(chuàng)建實(shí)例在中，如果我們想要?jiǎng)討B(tài)地來控制一個(gè)組件的顯示和隱藏，比如通過點(diǎn)擊按鈕顯示一個(gè)對(duì)話框或者彈出一條信息。通過創(chuàng)建構(gòu)造器這個(gè)構(gòu)造器用于需要顯示是創(chuàng)建實(shí)例。

Vue中通過Vue.extend動(dòng)態(tài)創(chuàng)建實(shí)例

在Vue中，如果我們想要?jiǎng)討B(tài)地來控制一個(gè)組件的顯示和隱藏，比如通過點(diǎn)擊按鈕顯示一個(gè)對(duì)話框或者彈出一條信息。我們通常會(huì)提前寫好這個(gè)組件，然后通過v-if = “show”來控制它的顯示隱藏。如下所示：

    

        
        這是一條通過按鈕控制顯示隱藏的信息

另外還有一種實(shí)現(xiàn)方法就是通過Vue.extend來動(dòng)態(tài)地創(chuàng)建實(shí)例，在想要進(jìn)行顯示的時(shí)候創(chuàng)建實(shí)例。
在需要隱藏的時(shí)候刪除這個(gè)實(shí)例。

通過Vue.extend創(chuàng)建構(gòu)造器,這個(gè)構(gòu)造器用于需要顯示是創(chuàng)建實(shí)例。

const Constructor = Vue.extend({
    template:` {{message}} `,
    data(){
        return {
            message:"這是一條通過按鈕控制顯示隱藏的信息"
        }
    }
})

需要顯示時(shí)創(chuàng)建實(shí)例

showHandle(){
    const MessageCom = this.MessageCom = new Constructor({
        propsData:{
            show:true
        }
    }).$mount();

    this.$refs.message.appendChild(MessageCom.$el);
}

需要隱藏時(shí)刪除實(shí)例

hiddenHandle(){
    this.MessageCom.$el.remove()
    this.MessageCom.$destroy()
    this.MessageCom = null
}

這樣的話就同樣實(shí)現(xiàn)了一個(gè)顯示，隱藏效果。

使用場(chǎng)景

通過上面的分析，我們發(fā)現(xiàn)這種操作完全沒有必要，相比于通過屬性來控制顯示和隱藏；創(chuàng)建實(shí)例顯得更加麻煩。
但是它同樣具有一定的使用場(chǎng)景。比如：?jiǎn)卧獪y(cè)試時(shí)：

單元測(cè)試

在進(jìn)行單元測(cè)試時(shí)，為了實(shí)現(xiàn)在Vue中的測(cè)試，我們必須創(chuàng)建一個(gè)基于某個(gè)組件的實(shí)例，然后才能進(jìn)行測(cè)試。
如下所示：

    it("可以設(shè)置icon.", () => {
        const Constructor = Vue.extend(Button)
        const vm = new Constructor({
        propsData: {
            icon: "settings"
        }
        }).$mount()
        const useElement = vm.$el.querySelector("use")
        expect(useElement.getAttribute("xlink:href")).to.equal("#i-settings")
        vm.$destroy()
    })
替代DOM操作

在一些場(chǎng)合下，我們可能需要?jiǎng)?chuàng)建一個(gè)div這種，通常的實(shí)現(xiàn)方式如下：

let oDiv = document.createElement();
oDiv.innerHTML = "hello,world";
document.body.appendChild(oDiv);

但是，在Vue中操作DOM是非常不推薦的寫法，這時(shí)候我們建議使用Vue.extend來實(shí)現(xiàn)DOM的操作。

      const Constructor = Vue.extend(Toast);
      let oDiv = new Constructor();
      oDiv.$slots.default = [message];
      oDiv.$mount(); //必須使用$mount()進(jìn)行掛載，否則所有的生命周期的函數(shù)都不會(huì)執(zhí)行
      document.body.appendChild(oDiv.$el)
總結(jié)：

Vue.extend可以用于動(dòng)態(tài)地創(chuàng)建實(shí)例，在一些場(chǎng)景下可以使用。

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

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

相關(guān)文章

  • Vue.js基本語法的介紹

    摘要：當(dāng)表達(dá)式的值發(fā)生變化時(shí)，響應(yīng)應(yīng)用特定的行為到。指的是否重復(fù)，對(duì)重復(fù)的進(jìn)行服用循環(huán)中，表示數(shù)組第個(gè)元素表示對(duì)象的樣式綁定樣式也可以根據(jù)中的變量來動(dòng)態(tài)確定。 介紹 前段時(shí)間接觸到一個(gè)庫叫做Vue.js, 個(gè)人感覺很棒，所以整理了一篇博文做個(gè)介紹。Vue讀音/vju:/,和view類似。是一個(gè)數(shù)據(jù)驅(qū)動(dòng)的web界面庫。Vue.js只聚焦于視圖層，可以很容易的和其他庫整合。代碼壓縮后只有24kb...

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

  • 【Vue實(shí)例】

    摘要：的介紹就直接連接到官網(wǎng)了，官網(wǎng)介紹很詳細(xì)了介紹構(gòu)造函數(shù)在使用之前我們首先需要構(gòu)建實(shí)例以上代碼是通過構(gòu)建了一個(gè)實(shí)例，構(gòu)造函數(shù)中是一個(gè)對(duì)象，上面代碼我用了一個(gè)空的對(duì)象，對(duì)象中可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項(xiàng)。 使用過一段時(shí)間的vue1.0,現(xiàn)在vue已經(jīng)更新了很多版本了，語法在很多地方也有了變化。在此記錄一下重新學(xué)習(xí)的過程以及對(duì)vue的一些自己的理解。vue的介紹就直接連接...

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

  • VUE

    摘要：注意指令前面需要加，對(duì)指令傳遞數(shù)據(jù)賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實(shí)現(xiàn)自定義指令注冊(cè)完成。 vue Vue.js 構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的web界面庫。集中實(shí)現(xiàn)MVVM 的 VM層。容易與其他庫或項(xiàng)目整合 通過盡可能簡(jiǎn)單的API實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件核心：相應(yīng)的數(shù)據(jù)綁定系統(tǒng)， 數(shù)據(jù)與DOM保持同步數(shù)據(jù)驅(qū)動(dòng)的視圖，普通的HTML模板中使用特殊的語...

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

  • 面試被問到Vue?想進(jìn)一步提升?那就停下來看一下吧

    摘要：兩個(gè)對(duì)象鍵名沖突時(shí)，取組件對(duì)象的鍵值對(duì)。允許聲明擴(kuò)展另一個(gè)組件可以是一個(gè)簡(jiǎn)單的選項(xiàng)對(duì)象或構(gòu)造函數(shù)，而無需使用。這主要是為了便于擴(kuò)展單文件組件。 Vue作為最近最炙手可熱的前端框架，其簡(jiǎn)單的入門方式和功能強(qiáng)大的API是其優(yōu)點(diǎn)。而同時(shí)因?yàn)槠銩PI的多樣性和豐富性，所以他的很多開發(fā)方式就和一切基于組件的React不同，如果沒有對(duì)Vue的API（有一些甚至文檔都沒提到）有一個(gè)全面的了解，那么在...

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

  • Vue.extend用法（主要用于需要 動(dòng)態(tài)渲染的組件，或者類似于window.alert() 提示

    摘要：一簡(jiǎn)單的使用主要用于需要?jiǎng)討B(tài)渲染的組件，或者類似于提示組件注意創(chuàng)建的是一個(gè)組件構(gòu)造器，而不是一個(gè)具體的組件實(shí)例屬于的全局，在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫膶懛ㄊ褂貌襟E要更加繁瑣一些。 最近在重構(gòu)公司的項(xiàng)目，有些組件想要封裝的更靈活，例如toast、loading、messageBox等彈窗組件，模仿了mint-ui封裝此類組件的方式封裝了自己的彈窗組件； mint-UI的t...

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

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

0條評(píng)論

閱讀需要支付1元查看
<