> :key="index" :movie="item" 向子組件傳遞數據
```
<template>
<div class="home">
<movie-item v-for="(item,index) of movies" :key="index" :movie="item" @jump="onJump"></movie-item>
</div>
</template>
```
> 引入模板及axios
```
<script>
import MovieItem from "../components//MovieItem";
import axios from "axios-jsonp-pro";
```
```
export default {
name: "home",
data() {
return {
movies: []
};
},
```
> 注冊模板
```
components: {
MovieItem
},
```
> mounted()相當于onload()
在加載時進行數據請求
```
mounted() {
var url = "https://douban.uieee.com/v2/movie/top250";
axios.jsonp(url).then(res => {
this.handleDta(res);
});
},
```
> 自定義處理數據函數
```
methods: {
handleDta(res) {
var subjects = res.subjects;
var movies = [];
subjects.forEach(item => {
var temp = {
id: item.id,
imageUrl: item.images.small,
title: item.title
};
movies.push(temp);
});
this.movies = movies;
},
```
> 進行頁面跳轉
```
onJump(id){
this.$router.push('/about/'+id);
}
}
};
</script>
```
