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

更新時(shí)間：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)建一個(gè)“子類”，參數(shù)是一個(gè)包含組件選項(xiàng)的對象，其中,data選項(xiàng)中必須是函數(shù)

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

2.簡單舉例

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

下面的代碼中的author就是返回的“擴(kuò)展實(shí)例構(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>

此時(shí)的頁面必然是沒有任何效果的，因?yàn)閿U(kuò)展實(shí)例構(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)簽上

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

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

Vue?webpack的基本使用示例教程
這篇文章主要介紹了Vue?webpack的基本使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
uni-app資源引用的方法匯總(絕對路徑和相對路徑)
在基于UniApp開發(fā)跨平臺應(yīng)用時(shí),開發(fā)者通過特定語法來管理和加載應(yīng)用程序的各種資源文件,如圖片、字體、音頻、視頻等,在uni-app中,資源通常會被組織在項(xiàng)目的各個(gè)目錄下,本文給大家介紹了uni-app資源引用的方法匯總,需要的朋友可以參考下
2025-01-01
vue如何使用vue slot封裝公共組件
這篇文章主要介紹了vue如何使用vue slot封裝公共組件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法
這篇文章主要介紹了Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-08-08
vue項(xiàng)目移動(dòng)端實(shí)現(xiàn)ip輸入框問題
這篇文章主要介紹了vue項(xiàng)目移動(dòng)端實(shí)現(xiàn)ip輸入框問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例
今天小編就為大家分享一篇vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
如何寫好一個(gè)vue組件,老夫的一年經(jīng)驗(yàn)全在這了（推薦）
這篇文章主要介紹了如何寫好一個(gè)vue組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
使用vscode格式化文檔無效的解決辦法(vue代碼格式化文檔無效)
這篇文章主要給大家介紹了關(guān)于使用vscode格式化文檔無效的解決辦法,也就是vue代碼格式化文檔無效,這是最近突然遇到的一個(gè)問題,這里給大家介紹一下解決的辦法,需要的朋友可以參考下
2023-08-08
vue項(xiàng)目中存儲與使用后端傳遞過來的token
vue作為一個(gè)單頁面應(yīng)用,vuex作為它的狀態(tài)管理工具,它至少是可以很好的保存這個(gè)token值,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中存儲與使用后端傳遞過來的token的相關(guān)資料,需要的朋友可以參考下
2023-03-03
vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載示例
這篇文章主要為大家介紹了vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載的發(fā)發(fā)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07