3. 综合运用 · vue.js

### 1. 子组件MovieItem.vue ~~~ <template> <div class="container" @click="handleClick"> <img :src="movie.imageUrl" alt=""> <p>{{movie.title}}</p> </div> </template> <script> export default { name:"MovieItem", props:{ movie:{ type:Object } }, methods:{ handleClick(){ // 子组件自定义事件,向父组件传参 this.$emit("jump",this.movie.id) } } } </script> <style lang="scss" scoped> .container{ img{ width:150px; } font-size: 14px; box-shadow: 0 0 5px 3px rgba(51, 51, 51, 0.26); margin-top: 20px; } </style> ~~~ ### 2. Home.vue ~~~ <template> <div class="home">   <movie-item v-for="(item,index) of movies" :key="index" :movie="item" @jump="onJump"></movie-item> </div> </template> <script> import MovieItem from "../components/MovieItem"; import axios from "axios-jsonp-pro"; 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.handleData(res); }) }, methods:{ onJump(id){ this.$router.push('/about/'+id); }, handleData(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; } } }; </script> <style lang="scss" scoped> .home{ padding:20px; max-width: 748px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; justify-content: space-between; } </style> ~~~ ### 3. About.vue ~~~ <template> <div class="about"> <div class="content"> <img :src="imgUrl" alt> <h6>{{title}}</h6> </div> <p>{{summary}}</p> </div> </template> <script> import axios from "axios-jsonp-pro"; export default { name: "About", data() { return { imgUrl: "", title: "", summary: "" }; }, mounted() { var id = this.$route.params.id; var url = "https://douban.uieee.com/v2/movie/subject/"; axios.jsonp(url + id).then(res => { this.imgUrl = res.images.small; this.title = res.title; this.summary = res.summary; }); } }; </script> <style lang="scss" scoped> .about { padding:20px; max-width: 800px; margin-left: auto; margin-right: auto; h6{ line-height: 40px; } img{ margin-top: 20px; } } .content{ text-align: center; margin-bottom: 20px; } </style> ~~~ ### 4. router.js ~~~ import Vue from 'vue' import Router from 'vue-router' import Home from './pages/Home.vue' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about/:id', name: 'about', component: () => import('./pages/About.vue') } ] }) ~~~