vue2.0的擴展extend

Vue.extend 返回的是一個“擴展實例構造器”,也就是預設了部分選項的Vue實例構造器。經常服務於Vue.component用來生成組件,可以簡單理解爲當在模板中遇到該組件名稱作爲標籤的自定義元素時,會自動調用“擴展實例構造器”來生產組件實例,並掛載到自定義元素上。

我們以一個例子來進行說明:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<sites></sites>
<script type="text/javascript">
/*這裏是創建exercise構造器*/
var exercise= Vue.extend({
template:"<p><a :href='links'>{{site}}</a></p>",
data:function(){
return{
site:'百度',
links:'http://www.baidu.com'
}
}
});

/*這裏是掛載到我們創建的構造器上面*/

new exercise().$mount('sites');
new exercise().$mount('#sites');
new exercise().$mount('.sites');
</script>
</body>
</html>


需要注意的是 : new exercise().$mount(" 這裏可以是標籤,也可以是id選擇器,也可以是類選擇器  ")

發佈了55 篇原創文章 · 獲贊 24 · 訪問量 13萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章