官方的文檔說(shuō)的很清楚了，我就來(lái)點(diǎn)直白一些的話來(lái)說(shuō)*.vue組件
1.組件你可以看成是自定義標(biāo)簽的實(shí)現(xiàn)秧饮；
2.組件就是為了更好的代碼或者說(shuō)功能復(fù)用；
3.組件還可以是一整個(gè)頁(yè)面[vuejs里頁(yè)面也是組件，本系列路由第一篇就是]枉疼；
我們寫一個(gè)最簡(jiǎn)單的組件：數(shù)據(jù)表格吧轨帜，這里數(shù)據(jù)暫時(shí)寫死魄咕，后面我們?cè)偻ㄟ^(guò)vue-resource來(lái)獲取數(shù)據(jù)吧。[視圖的研發(fā)流程一般都是從死到活的蚌父，哈哈]
先看看怎么定義一個(gè)自己的組件以及如何復(fù)用
1.定義DataTable.vue：
<template>
<div>
<span>第1個(gè)子頁(yè)面-用戶列表頁(yè)</span>
<table>
<tr><th>編號(hào)</th><th>名字</th><th>郵箱</th><th>手機(jī)號(hào)</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:'關(guān)羽', 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.復(fù)用DataTable.vue：
當(dāng)你想在任何一個(gè)頁(yè)面使用這個(gè)組件的時(shí)候哮兰，那么導(dǎo)入這個(gè)組件，然后使用即可:
<template>
<DataTable/>
<DataTable/>
<DataTable/>
<template>
<script>
import DataTable from 'DataTable'
export default {
components:{DataTable}
}
</script>
說(shuō)明：
export default {
components:{DataTable}
}
components:{DataTable}的寫法其實(shí)是簡(jiǎn)寫于：components:{DataTable:DataTable}, 前面含義是別名苟弛，后面是導(dǎo)入的組件名喝滞；
你可以這么寫：
<template>
<vtable/>
<vtable/>
<vtable/>
<template>
export default {
components:{vtable:DataTable}
}
3.本篇還有一個(gè)說(shuō)明：就是使用了model數(shù)據(jù)綁定以及v-for語(yǔ)法；關(guān)于語(yǔ)法我這里就不說(shuō)了膏秫，既然要學(xué)右遭，語(yǔ)法肯定是基礎(chǔ)；有了入門第一篇的認(rèn)識(shí)，就能把官方文檔里的語(yǔ)法學(xué)習(xí)及相關(guān)案例可以跑ok了【官方文檔真的是最贊的了】窘哈。隨后等我vue2的語(yǔ)法xmind圖整理好了會(huì)發(fā)出來(lái)給大家吹榴。但是這個(gè)東西明說(shuō)呢，你至少要知道有什么滚婉，能做什么图筹；然后哪怕代碼不會(huì)再查文檔，而不是等著別人分享東西满哪，就是分享婿斥，也還是需要自己去走一遍的。
最后說(shuō)個(gè)題外話：
Vue.component('simple-counter', {
..組件定義的代碼
})
和*.vue文件中的
...
<script>
export default {
..組件定義的代碼
}
</script>
...
對(duì)應(yīng)即可哨鸭，這樣你可以把官方文檔中傳統(tǒng)模式的測(cè)試小例子寫成*.vue的組件進(jìn)行測(cè)試【本系列第一篇其實(shí)就是這個(gè)意思[找到一種代碼對(duì)應(yīng)關(guān)系民宿，然后一通百通]】，因?yàn)槭切“兹腴T篇像鸡，我直接就用也許不嚴(yán)謹(jǐn)?shù)潜容^直白一點(diǎn)的語(yǔ)言告訴小白活鹰，可以這么干，然后你就可以循序漸進(jìn)學(xué)到更多只估，等以后志群，就知道為什么會(huì)這樣了。
組件定義的代碼塊主要包含了：data蛔钙，computed锌云，methods, 然后就是周期回調(diào)如：created,mounted。相信學(xué)了官方文檔的童鞋不用多說(shuō)什么了吁脱。
