Vue.extend構造器的詳解
Vue.extend構造器的詳解
1.簡單介紹
Vue.extend(options)
參數(shù)：對象
用法：使用Vue構造器，創(chuàng)建一個“子類”，參數(shù)是一個包含組件選項的對象，其中,data選項中必須是函數(shù)
描述：Vue.extend返回的是一個“擴展實例構造器”，也就是預設了部分選項的Vue的實例構造器，它常常服務于Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組件作為標簽的自定義元素時，會自動調(diào)用“擴展實例構造器”來生產(chǎn)組件實例，并掛在到自定義元素上
2.簡單舉例
自定義無參數(shù)標簽
下面的代碼中的author就是返回的“擴展實例構造器”
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>
此時的頁面必然是沒有任何效果的，因為擴展實例構造器還需要掛載，如下
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ù)
掛載在普通標簽上
返回的擴展實例構造器的方式和上面還是一樣的，只是html里不再是自定義標簽，而是一個普通標簽，比如div
<div id="author"></div>
new author().$mount('author');
其實對于同一個擴展構造器而言，它的每一個實例其實是可以掛載到不同的標簽上的，比如我可以這樣
new author().$mount('#author');
new author().$mount('author');
這兩個標簽的內(nèi)容會一同顯示，結果一樣
以上就是對Vue.extend構造器的實例詳解，本站還有很多關于vue js開發(fā)的資料，歡迎大家搜索參閱，如有疑問請大家留言，共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
如何用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
在用vite創(chuàng)建vue3項目時已經(jīng)選擇了添加ESLint,本文就來介紹一下ESLint在項目中需要怎樣配置和使用,具有一定的參考價值,感興趣的可以了解一下2023-09-09
這篇文章主要介紹了vue前端如何向后端傳遞參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
解決vue select當前value沒有更新到vue對象屬性的問題
今天小編就為大家分享一篇解決vue select當前value沒有更新到vue對象屬性的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
詳解Vue 2中的? initState 狀態(tài)初始化
這篇文章主要介紹了詳解Vue 2中的initState狀態(tài)初始化，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
Echarts+VUE柱狀圖繪制細節(jié)并且屏幕自適應完整代碼
柱狀圖(或稱條形圖)是一種通過柱形的長度來表現(xiàn)數(shù)據(jù)大小的一種常用圖表類型,這篇文章主要給大家介紹了關于Echarts+VUE柱狀圖繪制細節(jié)并且屏幕自適應的相關資料,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)表格合并功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
vue-cli webpack模板項目搭建及打包時路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項目搭建以及打包時路徑問題的解決方法,需要的朋友可以參考下2018-02-02
ElementUI 是一套ui組件庫，目前最新版本 react 和 vue 等主流框架都有支持。該庫默認主題色是天藍色，若用于項目開發(fā)，難免遇到要需求修改其默認樣式的情況，這篇文章主要介紹了ElementUI如何修改el-cascader的默認樣式,需要的朋友可以參考下2023-12-12