組鍵實戰列表 · 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> ~~~