## 请求豆瓣数据 ``` <template> <div class="home"> <movie-item v-for="(item,index) of movies" :key="index" :movie="item" @jump="onJump"></movie-item> </div> </template> ``` > :key="index" :movie="item" 向子组件传递数据 ``` <script> import MovieItem from "../components//MovieItem"; import axios from "axios-jsonp-pro"; ``` >引入模板及axios ``` export default { name: "home", data() { return { movies: [] }; }, ``` ``` components: { MovieItem }, ``` >注册模板 ``` mounted() { var url = "https://douban.uieee.com/v2/movie/top250"; axios.jsonp(url).then(res => { this.handleDta(res); }); }, ``` >mounted()相当于onload() 在加载时进行数据请求 ``` 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> ``` >进行页面跳转