组键实战列表 · vue

![](https://img.kancloud.cn/ae/0c/ae0cf859f311991c590d8f8274a9c376_1546x1213.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <article-list :articles="arts"></article-list>  </div> </body> </html> <script src="vue/vue.js"></script> --------------------------------------------------以下为子组件------------------------------------------------- <script> var articles={ //创建一个组件 template:` <ul> <li v-for='article in articles'> //历遍数据 <h1>{{ article.title }}</h1> <img :src='article.src' alt=""> //图片输出方法 <p>{{ article.desc }}</p> </li> </ul> `, props:['articles'] //父值数据传址到子组件 } --------------------------------------------------以下为父-------------------------------------------------- var vm=new Vue({ el:'#app', data:{ arts:[ //这个数组名字是父的数据 {title:'this is title1',src:'vue/images/0.jpg',desc:'this is desc1'}, //后台接受的数据 {title:'this is title2',src:'vue/images/0.jpg',desc:'this is desc2'}, {title:'this is title3',src:'vue/images/0.jpg',desc:'this is desc3'}, ] }, components:{ 'article-list':articles //注册组键名为html标签 } }) </script> ~~~