vue有兩大核心：<strong>數(shù)據(jù)驅(qū)動(dòng)</strong>和<strong>組件</strong>步咪。
<strong>組件</strong>是人為地把頁(yè)面合理地拆分成一個(gè)個(gè)區(qū)塊，讓這些區(qū)塊更方便重復(fù)使用益楼，有了組件猾漫，可以更高效合理地開(kāi)發(fā)和維護(hù)項(xiàng)目。
一偏形、規(guī)劃組件
上圖中 <b>橙色框框區(qū)塊</b>看作一個(gè)組件來(lái)進(jìn)行規(guī)劃静袖，這樣就方便復(fù)用這個(gè)組件；
二俊扭、規(guī)劃組件
用傳統(tǒng)的實(shí)現(xiàn)方式一個(gè)組件队橙，html代碼如下：
<div class="rbzzx_sale_end_con">
<div>
<span class="rbzzx_sale_end_con_img"><a href="javascript:;">< img src="images/armed_app45.png" /></a></span>
<div class="rbzzx_sale_end_con_txt">
<h5><a href="javascript:;">精選牛肉精選牛肉精選牛肉</a></h5>
<p class="p1">特賣價(jià)：<b>￥56800</b></p>
<p class="p2">原價(jià)：￥76000</p>
<a href="javascript:;" class="rbzzx_sale_end_btn">
<cite>即將開(kāi)始</cite>
<input type="button" />
</a>
</div>
</div>
</div>
<strong>釋：</strong> class為unit的<div>容器以及它的子孫節(jié)點(diǎn)組成了組件。在vue組件中萨惑，這些代碼將作為組件的模板template捐康。
看看vue如何實(shí)現(xiàn)一個(gè)組件的：
1、先創(chuàng)建一個(gè)vue實(shí)例:
<div id="app"></div>
<script>
new Vue({
el:"#app",
});
</script>
<strong>釋：</strong> 成功創(chuàng)建了一個(gè)vue實(shí)例vm庸蔼，掛載元素為id為app的div節(jié)點(diǎn)解总。
2、在創(chuàng)建實(shí)例vm之前姐仅，利用vue提供的API來(lái)注冊(cè)一個(gè)組件花枫。修改一下上面的代碼：
<div id="app">
<my-list></my-list>
</div>
<script>
Vue.component('my-list',{
template:`
<div>
<span><a>< img src="../images/bird1.png" /></a></span>
<div>
<h5><a>精選牛肉精選牛肉精選牛肉</a></h5>
<p>特賣價(jià)：<b>￥56800</b></p>
<p><a>原價(jià)：￥76000</a></p>
<cite>已結(jié)束</cite>
</div>
</div>`
});
let vm = new Vue({
el:"#app",
});
</script>
<strong>釋：</strong>使用了vue提供的全局API Vue.component() ，注冊(cè)了一個(gè)名為：“my-list”的組件掏膏，而組件的template正好是我們上面的html代碼劳翰，這樣，我們就可以用 <my-list></ my-list> 的方式來(lái)使用我們的組件馒疹。
<strong>注：</strong>注意：一定要確保實(shí)例vm在創(chuàng)建之前佳簸， <my-list> 組件已經(jīng)被成功注冊(cè)，這也是為什么我們要把代碼寫(xiě)在實(shí)例化之前颖变。
3生均、注冊(cè)了組件 <my-article> ，使用這個(gè)自定義的組件：
<div id="app">
<my-list></my-list>
</div>
<strong>釋：</strong>看到最終渲染的不是標(biāo)簽<my-list><my-list>腥刹，而是組件的模板template的值马胧。表示成功地注冊(cè)一個(gè)自定義的組件并使用它。
4衔峰、怎么實(shí)現(xiàn)傳參漓雅？
每件拍品的圖片录别、標(biāo)題、價(jià)格邻吞、狀態(tài)都不一樣，如何動(dòng)態(tài)地展示它們的數(shù)據(jù)呢葫男？涉及到了組件的傳參props抱冷，不但函數(shù)可以接受參數(shù)，vue的組件也可以梢褐。
(1) 把數(shù)據(jù)存儲(chǔ)在實(shí)例vm的data中：
new Vue({
el:"#app",
data:{
akm_pp:
{
img_url:"../images/bird1.png",
title:"精選牛肉精選牛肉精選牛肉",
sale_price:"￥56800",
org_price:"原價(jià)：￥76000",
state:"立即購(gòu)買",
ended:false,
}
})
(2) 信息有了旺遮，傳到組件中:
<div id="app">
<my-list :detail="akm_pp"></my-list>
</div>
<strong>釋：</strong>就像一個(gè)函數(shù)傳參一樣，把detail理解成一個(gè)形參盈咳，akm_pp相當(dāng)于實(shí)參耿眉。
把注冊(cè)組件的代碼稍微修改一下：
Vue.component('my-list',{
props:['detail'],
template:`
<div style="margin-top:10px;">
<span><a>< img src="detail.img_url" /></a></span>
<div>
<h5><a>{{detail.title}}</a></h5>
<p>特賣價(jià)：<b>{{detail.sale_price}}</b></p>
<p><a>{{detail.org_price}}</a></p>
<cite>{{detail.state}}</cite>
</div>
</div>`
});
<strong>釋：</strong>除了template以外，增加了props鱼响，通過(guò)它來(lái)接受參數(shù)detail鸣剪，傳進(jìn)來(lái)之后，可以在組件的模板template中使用它所接受的所有數(shù)據(jù)了丈积。
(3) 數(shù)據(jù)多了之后筐骇，使用 v-for 指令，它是專門(mén)用于處理列表渲染的指令江滨；
new Vue({
el:"#app",
data:{
amk_list:[
{
img_url:"../images/bird1.png",
title:"精選牛肉精選牛肉精選牛肉",
sale_price:"￥56800",
org_price:"原價(jià)：￥76000",
state:"立即購(gòu)買",
ended:false,
},
{
img_url:"../images/bird2.png",
title:"hiddensmile",
sale_price:"￥123200",
org_price:"原價(jià)：￥200000",
state:"已結(jié)束",
ended:true,
},
{
img_url:"../images/bird3.png",
title:"澳洲進(jìn)口書(shū)畫(huà)澳洲進(jìn)口書(shū)畫(huà)澳洲進(jìn)口書(shū)畫(huà)",
sale_price:"￥666666",
org_price:"原價(jià)：￥888888",
state:"立即購(gòu)買",
ended:false,
},
{
img_url:"../images/bird4.png",
title:"倪萍的畫(huà)倪萍的畫(huà)倪萍的畫(huà)",
sale_price:"￥1314",
org_price:"原價(jià)：￥520",
state:"已結(jié)束",
ended:true,
},
]
}
});
<strong>注：</strong>組件已經(jīng)封裝好铛纬，只需要給它傳參即可，所以不需要改動(dòng)組件的代碼唬滑。而amk_list是一個(gè)數(shù)組告唆，用 v-for 指令對(duì)它進(jìn)行遍歷即可。
<div id="app">
<my-list v-for="amk_pp in amk_list" :detail="amk_pp"></my-list>
</div>
