Vue基礎入門(第二節)
--------------------------------------------------------------------------------------------------------------------------
一、組件
=============================================================
demo代碼地址：https://github.com/darkcityX/vueDemo
--------------------------------------------------------------------------------------------------------------------------
一、組件
1、相關介紹
（1）、組件是一個可被反覆使用的，帶有特定功能的視圖
（2）、組件並不是vue的專利，Vue/Angular/React的組件都是以w3c中的WebComponent爲標準創建的
（3）、組件樹
2、組件的封裝
（1）、全局組件
Vue.component('my-component',{
template: '<h1>hello VueJS</h1>'
});
（2）、局部組件
new Vue({
el : "#demo",
data : {
msg: "Vue is Awesome"
},
components:{
'my-header':{
template: '<h1>it 's head</h1>'
}
}
});
3、調用組件
像使用普通的html標籤一樣，去調用組件類
<my-header></my-header>
4、注意事項
（1）、全局組件並不意味可以用在任何一個位置，嵌套在任何一個組件
（2）、局部組件只能用在el所指定的標籤範圍內，不能嵌套在其它組件中
（3）、組件在調用時，必須寫開閉標籤。
練習：分頁功能
視圖：上一頁、下一頁 、分頁按鈕構成的
功能：
（1）、默認第一頁高亮
（2）、第一個選中，上一頁不能點擊
（3）、最後一個選中，下一頁不能點擊
（4）、選中某一頁，當前頁面高亮顯示