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: 1text：text1id: 2text：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 articlethis is article