組件是我們人爲地把頁面合理地拆分成一個個區塊，讓這些區塊更方便我們重複使用，有了組件，我們可以更高效合理地開發和維護我們的項目。
規劃組件
假設我們頁面上有這樣的一個佈局：
上圖是我們模仿微信公衆號的“歷史消息”的界面，我們看到的是一個文章的目錄列表，在我們公衆號，則看到的是我們《Vue2.0基礎》的系列文章。
這種情況下，我們把每一個文章標題區塊看作一個組件來進行規劃，這樣就方便我們去複用這個組件：
實現組件
我們學會了如何規劃出一個組件，接下來，我們看看在vue中如何實現一個組件。
（這一部分看作一個組件）
我們用傳統的實現方式一個組件，html代碼如下：
<div class="unit">
<div class="content">
<h1>這裏是文章的標題</h1>
<div class="info">
<span>2017年4月10日</span>
<span class="original">原創</span>
</div>
</div>
<img src="cover.jpg" alt="">
</div>
忽略css（這裏我們不介紹css），我們看到了上面html代碼結構，class爲unit的<div>容器以及它的子孫節點組成了我們的組件。在vue組件中，這些代碼將作爲我們組件的模板template。
什麼意思？我們來看看vue如何實現一個組件的。
首先，我們還是先創建一個vue實例，很熟練了，沒難度。
<div id="app"></div>
<script>
let vm = new Vue({
el:"#app",
});
</script>
成功創建了一個vue實例vm，掛載元素爲id爲app的div節點。
接下來，我們在創建實例vm之前，利用vue提供的API來註冊一個組件。稍微修改一下上面的代碼：
<div id="app"></div>
<script>
Vue.component('my-article',{
template:`<div>
<div>
<h1>這裏是文章的標題</h1>
<div>
<span>2017年4月10日</span>
<span>原創</span>
</div>
</div>
<img src="cover.jpg" alt="">
</div>`
});
let vm = new Vue({
el:"#app",
});
</script>
我們使用了vue提供的全局API Vue.component() ，註冊了一個名爲：“my-article”的組件，而組件的template正好是我們上面的html代碼，這樣，我們就可以用 <my-article></ my-article> 的方式來使用我們的組件。
注意：一定要確保實例vm在創建之前， <my-article> 組件已經被成功註冊，這也是爲什麼我們要把代碼寫在實例化之前。
既然註冊了組件 <my-article> ，我們就來使用這個自定義的組件：
<div id="app">
<my-article></my-article>
</div>
我們看看渲染的結果：
我們看到最終渲染的不是標籤<my-article></my-article>，而是我們組件的模板template的值。我們成功地註冊一個自定義的組件並使用它。
但這並不夠，我們有的文章目錄中不僅僅只有一篇文章，而且每篇文章的標題和日期都不一樣，我們如何動態地展示它們的數據呢？
這裏就涉及到了組件的傳參props，沒錯，不但函數可以接受參數，vue的組件也可以。接下來，我們看看怎麼實現傳參。
我們知道，組件中的這4部分是需要動態獲取數據的：標題，發佈日期，是否原創，文章封面圖。
那麼，我們就通過傳參的方式把這些數據傳到組件，實現數據動態展示。
首先，我們把數據存儲在實例vm的data中：
let vm = new Vue({
el:"#app",
data:{
article:{
title:"第一節：Vue.js框架是什麼，
爲什麼選擇它？",
date:" 2017年03月06日",
is_original:true,
cover_url:"cover.jpg"
}
}
});
我們給data增加了一個文章article的信息，包括：標題title，發佈日期date，是否原創is_original，封面圖片cover_url。
文章的信息有了，我們怎麼傳到組件中去呢？
<div id="app">
<my-article :detail="article"></my-article>
</div>
就像一個函數傳參一樣，你可以把detail理解成一個形參，article相當於實參。
我們給組件傳了參，組件內部怎麼接受並使用呢？我們接着看，十分簡單！
我們把註冊組件的代碼稍微修改一下：
Vue.component('my-article',{
props:['detail'],
template:`<div>
<div>
<h1>{{detail.title}}</h1>
<div>
<span>{{detail.date}}</span>
<span v-show="detail.is_original">原創</span>
</div>
</div>
<img :src="detail.cover_url" alt="">
</div>`
});
除了template以外，我們增加了props，通過它來接受我們的參數detail，傳進來之後，你可以在組件的模板template中使用它所接受的所有數據了。比如，我們傳進來的數據包含着文章的信息：title，date，is_original，cover_url。
讀取文章的標題：
<h1>{{detail.title}}</h1>
讀取文章的發佈日期：
<span>{{detail.date}}</span>
讀取文章是否原創，並通過 v-show 指令控制顯示/隱藏：
<span v-show="detail.is_original">原創</span>
讀取文章的封面圖片地址：
<img :src="detail.cover_url">
竟然讀取了數據，我們就看看渲染結果：
（數據動態讀取）
數據是動態讀取了，那麼我們的目錄並不僅僅只有一篇文章，當我們數據多了之後，該用什麼方式展示出來呢？
let vm = new Vue({
el:"#app",
data:{
articles:[
{
title:"第一節：Vue.js框架是什麼，
爲什麼選擇它？",
date:" 2017年03月06日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第二節：簡易安裝 和
快速入門Vue.js",
date:" 2017年03月09日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第三節：創建一個Vue實例，
超簡單",
date:" 2017年03月17日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第四節：定義一個vue實例的
4個常用選項",
date:" 2017年03月20日",
is_original:true,
cover_url:"cover.jpg"
},
]
}
});
假設我們的articles中有4篇文章的信息。
也許你已經相當到了，我們可以使用 v-for 指令，它是專門用於處理列表渲染的指令。結合我們的組件，一起來實現這個文章目錄的效果。
非常簡單，組件我們已經封裝好，我們只需要給它傳參即可，所以我們不需要改動組件的代碼。而articles是一個數組，我們用 v-for 指令對它進行遍歷即可。
我們對html代碼稍微改動一下：
<div id="app">
<my-article
v-for="item in articles"
:detail="item">
</my-article>
</div>
代碼很簡單，我們在組件上加上了 v-for 指令，並遍歷了articles。
渲染結果：
