亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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ù)：對(duì)象

用法：使用Vue構(gòu)造器，創(chuàng)建一個(gè)“子類”，參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象，其中,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í)，會(huì)自動(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'
  }
 }
});

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

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

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

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

相關(guān)文章

最新評(píng)論