欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.extend與vue.component的區(qū)別和聯(lián)系

 更新時間:2018年09月19日 11:27:42   作者:battle_wang  
這篇文章主要介紹了vue.extend與vue.component的區(qū)別和聯(lián)系,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下

如果大家只顧開發(fā),對基礎(chǔ)知識不了解,在今后的解決問題過程中,也是個大問題,今天小編抽空對基礎(chǔ)概念給大家屢一下,用于大家日后學(xué)習(xí)。

Vue.extend({})簡述:使用vue.extend返回一個子類構(gòu)造函數(shù),也就是預(yù)設(shè)部分選項的vue實例構(gòu)造器。

后可使用vue.component進行實例化、或使用new extendName().$mount(''+el)方式進行實例化(從而實現(xiàn)模擬組件)。

Vue.component({})簡述:不多介紹了。。。用于生成全局組件

使用:

  1,Vue.component使用Vue.extend生成的構(gòu)造函數(shù):

  2,實例化構(gòu)造函數(shù)從而模擬組件:

vue.extend與vue.component的區(qū)別總結(jié)

在Vue.js中,Vue本身是一個constructor。

Vue.extend() 是一個繼承于方法的 class,參數(shù)是一個包含組件選項的對象。它的目的是創(chuàng)建一個Vue的子類并且返回相應(yīng)的 constructor。

而Vue.component()實際上是一個類似于Vue.directive() 和 Vue.filter()的注冊方法,它的目的是給指定的一個constructor一個String類型的ID,

之后Vue.js可以把它用作模板,實際上當(dāng)你直接傳遞選項給Vue.component()的時候,它會在背后調(diào)用Vue.extend()。

Vue.js支持兩種不同的API模型:一種是基于類的,命令式的,Backbone 類型的API;另一種是基于標(biāo)記語言的,聲明式的,Web組件類型的API。

如果還是困惑的話,可以想象你是怎么創(chuàng)建通過new Image()或者 <img>標(biāo)簽創(chuàng)建 image元素的就知道了。

這兩種方法都對指定的類型很有用,Vue.js提供這兩者只是為了更好的靈活性。

下面看下vue.extend,new vue 和vue.component的區(qū)別

extend 是構(gòu)造一個組件的語法器. 你給它參數(shù) 他給你一個組件 然后這個組件

你可以作用到Vue.component 這個全局注冊方法里, 也可以在任意vue模板里使用apple組件

var apple = Vue.extend({ …. }) Vue.component(‘a(chǎn)pple',apple)

你可以作用到vue實例或者某個組件中的components屬性中并在內(nèi)部使用apple組件

new Vue({ components:{ apple:apple } })

Vue.component 你可以創(chuàng)建 ,也可以取組件 例如下

var apple = Vue.component(‘a(chǎn)pple') 而new vue 是新建一個vue對象 所以可以理解為new vue < vue.extand < vue.component

相關(guān)文章

  • vue中的el-button樣式自定義方式

    vue中的el-button樣式自定義方式

    這篇文章主要介紹了vue中的el-button樣式自定義方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • 詳解elementui之el-image-viewer(圖片查看器)

    詳解elementui之el-image-viewer(圖片查看器)

    這篇文章主要介紹了詳解elementui之el-image-viewer(圖片查看器),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • Vue讓router-view默認(rèn)顯示頁面操作方法

    Vue讓router-view默認(rèn)顯示頁面操作方法

    一個home頁面,點擊左邊的菜單欄,右邊顯示頁面,因此都知道在右邊放一個router-view然后配置路由即可,然而問題出現(xiàn)在:重新打開的時候,默認(rèn)是白色空的,遇到這樣的問題如何解決呢,下面小編給大家分享Vue讓router-view默認(rèn)顯示頁面操作方法,感興趣的朋友一起看看吧
    2024-03-03
  • 在Vue中使用deep深度選擇器修改element UI組件的樣式

    在Vue中使用deep深度選擇器修改element UI組件的樣式

    這篇文章主要介紹了在Vue中使用deep深度選擇器修改element UI組件的樣式,本文分為兩種方法給大家介紹,在這小編比較推薦使用第二種使用 deep 深度選擇器,感興趣的朋友跟隨小編一起看看吧
    2022-12-12
  • vue2.x?el-table二次封裝實現(xiàn)編輯修改

    vue2.x?el-table二次封裝實現(xiàn)編輯修改

    本文主要介紹了vue2.x?el-table二次封裝實現(xiàn)編輯修改,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue為何棄用Ajax,選擇Axios?ajax與axios的區(qū)別?

    Vue為何棄用Ajax,選擇Axios?ajax與axios的區(qū)別?

    ajax技術(shù)實現(xiàn)了局部數(shù)據(jù)的刷新,axios實現(xiàn)了對ajax的封裝;axios有的ajax都有,ajax有的axios不一定有。總結(jié)一句話就是axios是ajax,ajax不止axios。
    2023-01-01
  • vue.js單文件組件中非父子組件的傳值實例

    vue.js單文件組件中非父子組件的傳值實例

    今天小編就為大家分享一篇vue.js單文件組件中非父子組件的傳值實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vuex之理解Getters的用法實例

    Vuex之理解Getters的用法實例

    這篇文章主要介紹了Vuex之理解Getters的用法實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • 解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題

    解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題

    這篇文章主要介紹了解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue2中provide/inject的使用與響應(yīng)式傳值詳解

    vue2中provide/inject的使用與響應(yīng)式傳值詳解

    Vue中 Provide/Inject實現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關(guān)于vue2中provide/inject的使用與響應(yīng)式傳值的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09

最新評論