vue有两大核心：<strong>数据驱动</strong>和<strong>组件</strong>。
<strong>组件</strong>是人为地把页面合理地拆分成一个个区块，让这些区块更方便重复使用，有了组件，可以更高效合理地开发和维护项目。
一、规划组件
上图中 <b>橙色框框区块</b>看作一个组件来进行规划，这样就方便复用这个组件；
二、规划组件
用传统的实现方式一个组件，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">特卖价：<b>¥56800</b></p>
<p class="p2">原价：¥76000</p>
<a href="javascript:;" class="rbzzx_sale_end_btn">
<cite>即将开始</cite>
<input type="button" />
</a>
</div>
</div>
</div>
<strong>释：</strong> class为unit的<div>容器以及它的子孙节点组成了组件。在vue组件中，这些代码将作为组件的模板template。
看看vue如何实现一个组件的：
1、先创建一个vue实例:
<div id="app"></div>
<script>
new Vue({
el:"#app",
});
</script>
<strong>释：</strong> 成功创建了一个vue实例vm，挂载元素为id为app的div节点。
2、在创建实例vm之前，利用vue提供的API来注册一个组件。修改一下上面的代码：
<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>特卖价：<b>¥56800</b></p>
<p><a>原价：¥76000</a></p>
<cite>已结束</cite>
</div>
</div>`
});
let vm = new Vue({
el:"#app",
});
</script>
<strong>释：</strong>使用了vue提供的全局API Vue.component() ，注册了一个名为：“my-list”的组件，而组件的template正好是我们上面的html代码，这样，我们就可以用 <my-list></ my-list> 的方式来使用我们的组件。
<strong>注：</strong>注意：一定要确保实例vm在创建之前， <my-list> 组件已经被成功注册，这也是为什么我们要把代码写在实例化之前。
3、注册了组件 <my-article> ，使用这个自定义的组件：
<div id="app">
<my-list></my-list>
</div>
<strong>释：</strong>看到最终渲染的不是标签<my-list><my-list>，而是组件的模板template的值。表示成功地注册一个自定义的组件并使用它。
4、怎么实现传参？
每件拍品的图片、标题、价格、状态都不一样，如何动态地展示它们的数据呢？涉及到了组件的传参props，不但函数可以接受参数，vue的组件也可以。
(1) 把数据存储在实例vm的data中：
new Vue({
el:"#app",
data:{
akm_pp:
{
img_url:"../images/bird1.png",
title:"精选牛肉精选牛肉精选牛肉",
sale_price:"¥56800",
org_price:"原价：¥76000",
state:"立即购买",
ended:false,
}
})
(2) 信息有了，传到组件中:
<div id="app">
<my-list :detail="akm_pp"></my-list>
</div>
<strong>释：</strong>就像一个函数传参一样，把detail理解成一个形参，akm_pp相当于实参。
把注册组件的代码稍微修改一下：
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>特卖价：<b>{{detail.sale_price}}</b></p>
<p><a>{{detail.org_price}}</a></p>
<cite>{{detail.state}}</cite>
</div>
</div>`
});
<strong>释：</strong>除了template以外，增加了props，通过它来接受参数detail，传进来之后，可以在组件的模板template中使用它所接受的所有数据了。
(3) 数据多了之后，使用 v-for 指令，它是专门用于处理列表渲染的指令；
new Vue({
el:"#app",
data:{
amk_list:[
{
img_url:"../images/bird1.png",
title:"精选牛肉精选牛肉精选牛肉",
sale_price:"¥56800",
org_price:"原价：¥76000",
state:"立即购买",
ended:false,
},
{
img_url:"../images/bird2.png",
title:"hiddensmile",
sale_price:"¥123200",
org_price:"原价：¥200000",
state:"已结束",
ended:true,
},
{
img_url:"../images/bird3.png",
title:"澳洲进口书画澳洲进口书画澳洲进口书画",
sale_price:"¥666666",
org_price:"原价：¥888888",
state:"立即购买",
ended:false,
},
{
img_url:"../images/bird4.png",
title:"倪萍的画倪萍的画倪萍的画",
sale_price:"¥1314",
org_price:"原价：¥520",
state:"已结束",
ended:true,
},
]
}
});
<strong>注：</strong>组件已经封装好，只需要给它传参即可，所以不需要改动组件的代码。而amk_list是一个数组，用 v-for 指令对它进行遍历即可。
<div id="app">
<my-list v-for="amk_pp in amk_list" :detail="amk_pp"></my-list>
</div>
