官方的文檔說的很清楚了，我就來點直白一些的話來說*.vue組件
1.組件你可以看成是自定義標簽的實現；
2.組件就是為了更好的代碼或者說功能復用；
3.組件還可以是一整個頁面[vuejs里頁面也是組件，本系列路由第一篇就是]；
我們寫一個最簡單的組件：數據表格吧，這里數據暫時寫死，后面我們再通過vue-resource來獲取數據吧。[視圖的研發流程一般都是從死到活的，哈哈]
先看看怎么定義一個自己的組件以及如何復用
1.定義DataTable.vue：
<template>
<div>
<span>第1個子頁面-用戶列表頁</span>
<table>
<tr><th>編號</th><th>名字</th><th>郵箱</th><th>手機號</th></tr>
<tr v-for="user in users" ><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.email}}</td><td>{{user.mobile}}</td></tr>
</table>
</div>
</template>
<script>
export default {
data () {
return {
users:[
{id:1, name:'劉備', emial:'lbei@163.com', mobile:'18989899991'},
{id:2, name:'關羽', emial:'gyu@163.com', mobile:'18989899992'},
{id:3, name:'張飛', emial:'zhfei@163.com', mobile:'18989899993'},
{id:4, name:'曹操', emial:'ccao@163.com', mobile:'18889899991'},
{id:5, name:'曹丕', emial:'cpi@163.com', mobile:'18889899992'},
{id:6, name:'曹沖', emial:'cchong@163.com', mobile:'18889899993'}
],
}
}
}
</script>
<style scoped>
span{
font-weight: normal;
color:red
}
</style>
2.復用DataTable.vue：
當你想在任何一個頁面使用這個組件的時候，那么導入這個組件，然后使用即可:
<template>
<DataTable/>
<DataTable/>
<DataTable/>
<template>
<script>
import DataTable from 'DataTable'
export default {
components:{DataTable}
}
</script>
說明：
export default {
components:{DataTable}
}
components:{DataTable}的寫法其實是簡寫于：components:{DataTable:DataTable}, 前面含義是別名，后面是導入的組件名；
你可以這么寫：
<template>
<vtable/>
<vtable/>
<vtable/>
<template>
export default {
components:{vtable:DataTable}
}
3.本篇還有一個說明：就是使用了model數據綁定以及v-for語法；關于語法我這里就不說了，既然要學，語法肯定是基礎；有了入門第一篇的認識，就能把官方文檔里的語法學習及相關案例可以跑ok了【官方文檔真的是最贊的了】。隨后等我vue2的語法xmind圖整理好了會發出來給大家。但是這個東西明說呢，你至少要知道有什么，能做什么；然后哪怕代碼不會再查文檔，而不是等著別人分享東西，就是分享，也還是需要自己去走一遍的。
最后說個題外話：
Vue.component('simple-counter', {
..組件定義的代碼
})
和*.vue文件中的
...
<script>
export default {
..組件定義的代碼
}
</script>
...
對應即可，這樣你可以把官方文檔中傳統模式的測試小例子寫成*.vue的組件進行測試【本系列第一篇其實就是這個意思[找到一種代碼對應關系，然后一通百通]】，因為是小白入門篇，我直接就用也許不嚴謹但是比較直白一點的語言告訴小白，可以這么干，然后你就可以循序漸進學到更多，等以后，就知道為什么會這樣了。
組件定義的代碼塊主要包含了：data，computed，methods, 然后就是周期回調如：created,mounted。相信學了官方文檔的童鞋不用多說什么了。
