Vue.extend構(gòu)造器的詳解
Vue.extend構(gòu)造器的詳解
1.簡單介紹
Vue.extend(options)
參數(shù)：對象
用法：使用Vue構(gòu)造器，創(chuàng)建一個“子類”，參數(shù)是一個包含組件選項的對象，其中,data選項中必須是函數(shù)
描述：Vue.extend返回的是一個“擴展實例構(gòu)造器”，也就是預設了部分選項的Vue的實例構(gòu)造器，它常常服務于Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組件作為標簽的自定義元素時，會自動調(diào)用“擴展實例構(gòu)造器”來生產(chǎn)組件實例，并掛在到自定義元素上
2.簡單舉例
自定義無參數(shù)標簽
下面的代碼中的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'
}
}
});
對應的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ù)
掛載在普通標簽上
返回的擴展實例構(gòu)造器的方式和上面還是一樣的，只是html里不再是自定義標簽，而是一個普通標簽，比如div
<div id="author"></div>
new author().$mount('author');
其實對于同一個擴展構(gòu)造器而言，它的每一個實例其實是可以掛載到不同的標簽上的，比如我可以這樣
new author().$mount('#author');
new author().$mount('author');
這兩個標簽的內(nèi)容會一同顯示，結(jié)果一樣
以上就是對Vue.extend構(gòu)造器的實例詳解，本站還有很多關(guān)于vue js開發(fā)的資料，歡迎大家搜索參閱，如有疑問請大家留言，共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
- 關(guān)于vue.extend和vue.component的區(qū)別淺析
- 用Vue.extend構(gòu)建消息提示組件的方法實例
- vue.extend實現(xiàn)alert模態(tài)框彈窗組件
- vue.extend與vue.component的區(qū)別和聯(lián)系
- Vue組件教程之Toast(Vue.extend 方式)詳解
- vue19 組建 Vue.extend component、組件模版、動態(tài)組件 的實例代碼
- 深入理解Vue生命周期、手動掛載及掛載子組件
- vue 掛載路由到頭部導航的方法
- vue組件掛載到全局方法的示例代碼
- Vue.extend實現(xiàn)掛載到實例上的方法
相關(guān)文章
這篇文章主要介紹了Vue?webpack的基本使用,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
在基于UniApp開發(fā)跨平臺應用時,開發(fā)者通過特定語法來管理和加載應用程序的各種資源文件,如圖片、字體、音頻、視頻等,在uni-app中,資源通常會被組織在項目的各個目錄下,本文給大家介紹了uni-app資源引用的方法匯總,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue如何使用vue slot封裝公共組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue.js實現(xiàn)數(shù)據(jù)響應的方法
這篇文章主要介紹了Vue.js實現(xiàn)數(shù)據(jù)響應的方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue項目移動端實現(xiàn)ip輸入框問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue改變循環(huán)遍歷后的數(shù)據(jù)實例
今天小編就為大家分享一篇vue改變循環(huán)遍歷后的數(shù)據(jù)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
如何寫好一個vue組件,老夫的一年經(jīng)驗全在這了（推薦）
這篇文章主要介紹了如何寫好一個vue組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
使用vscode格式化文檔無效的解決辦法(vue代碼格式化文檔無效)
這篇文章主要給大家介紹了關(guān)于使用vscode格式化文檔無效的解決辦法,也就是vue代碼格式化文檔無效,這是最近突然遇到的一個問題,這里給大家介紹一下解決的辦法,需要的朋友可以參考下2023-08-08
vue作為一個單頁面應用,vuex作為它的狀態(tài)管理工具,它至少是可以很好的保存這個token值,下面這篇文章主要給大家介紹了關(guān)于vue項目中存儲與使用后端傳遞過來的token的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了vue中多個文件下載實現(xiàn)打包壓縮下載的發(fā)發(fā)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07