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