Cpage.js列表渲染

在实际开发中，经常会遇到列表之类的dom结构，这时候一个好的列表渲染方式可以显著地提高开发效率。
Cpage.js框架提供列表渲染指令 c-for

 c-for="item in items"

渲染节点

<div c-for="item in items">
    <h1>id: {{item.id}}</h1>
    <h2>text：{{item.text}}</h2>
</div>

显示结果：

id: 1

text：text1

id: 2

text：text2

该指令也可以进行渲染组件
首先，我们需要制作一个组件，组件暂命名为myArticle

var article = Cpage.component({
    name: 'myArticle',
    mode: 'E',
    components: [],
    template: `<div>{{article}}</div>`,
    data: {
        article: 'this is article'
    },
    beforeRender() {

    },
    render() {

    }
});

在父组件的components属性里面引入article组件之后，就可以使用了，components: [article]
此处的article指的是名称为myArticle的组件的示例。

渲染组件时候，在组件外围包裹一层节点。

<div c-for="item in items">
    <my-article></my-article>
</div>

显示结果：

this is article
this is article