vue --- compoent妙用

首先利用写一个静态模板的组件

<div id = "app"><my-arti></my-arti>
</div>
<script>Vue.component('my-arti',{template:'<div style="border:1px solid black">'+'<span>date:2019年06月14日</span><br>'+'<span>count:3</span>'+'</div>'});let vm = new Vue({el:'#app',});
</script>

在这里插入图片描述
上述date和count属性是变化的
可以使用props,来将其变为动态的.

<div id = "app"><my-arti :detail='article'></my-arti>
</div>
<script>Vue.component('my-arti',{props:['detail'],template:'<div style="border:1px solid black">'+'<span>date:' + detail.date +'<span><br>'+'<span>count:' + detail.count + 'span>'+'</div>'});let vm = new Vue({el:'#app‘，data:{article:{date:'2019年06月14日',count:'3',}}});
</script>
// 通过:detail="article",将article传入到组件my-arti中

在这里插入图片描述
写好了模板,下面复用该模板.

<div id="app"><my-arti v-for ="item in articles" :details="item"></my-arti>
</div>
<script>Vue.component('my-arti',{props:['details'],template:'<div style="border: 1px solid black;margin-bottom:5px;">'+'<span>Date:{{details.date}}</span>'+'<span>Count:{{details.count}}</span>'+'</div>'})let vm = new Vue({el:'#app',data:{articles:[{date:'2019年06月14日',count:'3'},{date:'2019年06月13日',count:'0',},{date:'2019年06月12日',count:'1',}]}});
</script>

在这里插入图片描述
参考 https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654486&idx=1&sn=d00b354ead8d81950186a6f03ed94931&chksm=872c4369b05bca7fd24f5a18e512c1b65825b708c05cd8981d78a2cc0c10e9071c89e6fd591a&scene=21#wechat_redirect