Vue.extend構(gòu)造器的詳解

更新時間：2017年07月17日 11:12:13 作者：Dear_Mr

這篇文章主要介紹了Vue.extend構(gòu)造器的詳解的相關(guān)資料,需要的朋友可以參考下

Vue.extend構(gòu)造器的詳解

1.簡單介紹

Vue.extend(options)

參數(shù)：對象

用法：使用Vue構(gòu)造器，創(chuàng)建一個“子類”，參數(shù)是一個包含組件選項的對象，其中,data選項中必須是函數(shù)

描述：Vue.extend返回的是一個“擴展實例構(gòu)造器”，也就是預(yù)設(shè)了部分選項的Vue的實例構(gòu)造器，它常常服務(wù)于Vue.component用來生成組件，可以簡單理解為當(dāng)在模板中遇到該組件作為標(biāo)簽的自定義元素時，會自動調(diào)用“擴展實例構(gòu)造器”來生產(chǎn)組件實例，并掛在到自定義元素上

2.簡單舉例

自定義無參數(shù)標(biāo)簽

下面的代碼中的author就是返回的“擴展實例構(gòu)造器”

var author = Vue.extend({
 template: "<p><a :href='url'>{{author}}</a></p>",
 data : function() {
  return {
   author : 'vamous',
   url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
  }
 }
});

對應(yīng)的html如下：

<author></author>

此時的頁面必然是沒有任何效果的，因為擴展實例構(gòu)造器還需要掛載，如下

new author().$mount('author');

使用propsData

var author = Vue.extend({
 template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",
 data : function() {
  return {
   author : 'vamous',
   url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
  }
 },
 props : ['name']
});

new author({propsData: {name : 'dear_mr'}}).$mount('#author');

可以利用propsData傳遞參數(shù)

掛載在普通標(biāo)簽上

返回的擴展實例構(gòu)造器的方式和上面還是一樣的，只是html里不再是自定義標(biāo)簽，而是一個普通標(biāo)簽，比如div

<div id="author"></div>

 new author().$mount('author');

其實對于同一個擴展構(gòu)造器而言，它的每一個實例其實是可以掛載到不同的標(biāo)簽上的，比如我可以這樣

new author().$mount('#author');
new author().$mount('author');

這兩個標(biāo)簽的內(nèi)容會一同顯示，結(jié)果一樣

以上就是對Vue.extend構(gòu)造器的實例詳解，本站還有很多關(guān)于vue js開發(fā)的資料，歡迎大家搜索參閱，如有疑問請大家留言，共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

如何用webpack4帶你實現(xiàn)一個vue的打包的項目
這篇文章主要介紹了如何用webpack4帶你實現(xiàn)一個vue的打包的項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
解決vue v-for 遍歷循環(huán)時key值報錯的問題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時key值報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue3項目中ESLint配置和使用
在用vite創(chuàng)建vue3項目時已經(jīng)選擇了添加ESLint,本文就來介紹一下ESLint在項目中需要怎樣配置和使用,具有一定的參考價值,感興趣的可以了解一下
2023-09-09
vue前端如何向后端傳遞參數(shù)
這篇文章主要介紹了vue前端如何向后端傳遞參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
解決vue select當(dāng)前value沒有更新到vue對象屬性的問題
今天小編就為大家分享一篇解決vue select當(dāng)前value沒有更新到vue對象屬性的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
詳解Vue 2中的? initState 狀態(tài)初始化
這篇文章主要介紹了詳解Vue 2中的initState狀態(tài)初始化，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-08-08
Echarts+VUE柱狀圖繪制細節(jié)并且屏幕自適應(yīng)完整代碼
柱狀圖(或稱條形圖)是一種通過柱形的長度來表現(xiàn)數(shù)據(jù)大小的一種常用圖表類型,這篇文章主要給大家介紹了關(guān)于Echarts+VUE柱狀圖繪制細節(jié)并且屏幕自適應(yīng)的相關(guān)資料,需要的朋友可以參考下
2024-02-02
vue實現(xiàn)表格合并功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)表格合并功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
vue-cli webpack模板項目搭建及打包時路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項目搭建以及打包時路徑問題的解決方法,需要的朋友可以參考下
2018-02-02
ElementUI如何修改el-cascader的默認(rèn)樣式
ElementUI 是一套ui組件庫，目前最新版本 react 和 vue 等主流框架都有支持。該庫默認(rèn)主題色是天藍色，若用于項目開發(fā)，難免遇到要需求修改其默認(rèn)樣式的情況，這篇文章主要介紹了ElementUI如何修改el-cascader的默認(rèn)樣式,需要的朋友可以參考下
2023-12-12