vue組件化知識詳解：地址
使用vue組件化開發完成以下電影展示頁面
ajax請求地址：地址
目錄結構：
其中movieService.js爲ajax請求獲取數據
MovieContainer.js該組件僅用於獲取電影數據
MovieItem.js 該組件用於展示一條電影
MovieList.js 該組件用於展示多個電影
index.js 該組件負責新創建一個Vue實例
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./src/assets/index.css">
<script src="./vue/vue.js"></script>
<script src="./src/index.js" type="module"></script>
<div id="app"></div>
</head>
<body>
</body>
</html>
css文件：
.pager {
text-align: center;
margin-bottom: 100px;
}
.pager .pager-item {
display: inline-block;
padding: 5px 7px;
border: 1px solid #ccc;
margin: 8px;
cursor: pointer;
color: rgb(96, 96, 224);
}
.pager .pager-item.disabled {
color: #ccc;
cursor: not-allowed;
}
.pager .pager-item.active {
color: #f40;
border: none;
cursor: auto;
}
.data-container {
width: 1000px;
margin: 30px auto;
}
.data-container .data{
overflow: hidden;
border-bottom: 1px dashed #ccc;
padding: 30px 0;
}
.data-container .poster{
width: 150px;
height: 200px;
float: left;
margin-right: 20px;
}
.data-container .poster img{
width: 100%;
height: 100%;
}
.data-container .words{
overflow: hidden;
line-height: 1.5;
}
.data-container .words .title{
margin: 0;
margin-bottom: 10px;
}
.data-container .words .attach{
color: #888;
font-size: 14px;
line-height: 1.5;
margin-bottom: 10px;
}
.data-container .words .attach span{
margin-right: 20px;
}
.data-container .words .desc{
color: #666;
}
movieService.js
export default {
async getMovies(page, limit) {
var url = `http://yuanjin.tech:5005/api/movie?page=${page}&limit=${limit}`;
var datas = await fetch(url).then(resp => resp.json());
return datas;
},
async getMovie(id) {
var url = `http://yuanjin.tech:5005/api/movie/${id}`;
var datas = await fetch(url).then(resp =>
resp.json()
);
return datas;
}
};
index.js
// 入口模式
// 負責新創建一個Vue實例
import App from "./App.js"
new Vue({
el: "#app",
components:{
App
},
template:`<App/>`
});
最初版本App.js
import MovieItem from "./components/MovieItem.js"
var template = `
<div class = "data-container">
<MovieItem :movie = "movie"/>
</div>
`;
export default{
data() {
return {
movie:{
poster:"https://img.alicdn.com/bao/uploaded/i4/TB1sK93RVXXXXcIXXXXXXXXXXXX_.jpg_300x300.jpg",
name:"湄公河行動",
ename:"meigonghe"
}
}
},
components:{
MovieItem
},
template
}
首先我們先完成展示一條影片的展示
MovieItem.js
//一條電影
var template = `
<div class="data">
<div class="poster">
<img :src="movie.poster" alt="">
</div>
<div class="words">
<h2 class="title">{{movie.name}}</h2>
<div class="attach">
<span>英文名：{{movie.ename}}</span>
<span>類型：{{movie.type}}</span>
<br>
<span>上映地區：{{movie.area}}</span>
<span>上映時間：{{movie.upDate}}</span>
<span>時長：{{movie.time}}</span>
</div>
<div class="desc">
{{movie.intro}}
</div>
</div>
</div>
`;
export default{
props:["movie"],
template
}
接下來可以完成多個電影的展示。這個過程中會用到單個電影展示，因此可以通過import導入MovieItem.js組件
MovieItem.js
//顯示多個電影
// 作用不斷的渲染MovieItem組件
import MovieItem from "./MovieItem.js"
var template = `
<div class = "data-container">
<MovieItem :movie = "item" v-for = "item in movies" :key = "item._id"/>
</div>
`;
export default{
props: ["movies"], //電影數組
components:{
MovieItem
},
template
}
完成了多個電影的展示後，這個時候我們還需要一個組件（容器組件）用於獲取數據。
MovieContainer.js
//該組件僅用於獲取電影數據
import MovieList from "./MovieList.js";
import movieService from "../service/movieService.js"
var template = `
<MovieList :movies = "movies"/>
`;
export default {
components:{
MovieList
},
//用來獲取數據即數據就是屬於他的因此有data
data() {
return {
movies:[] //默認空數組
}
},
async created() {
//獲取電影數據
var resp = await movieService.getMovies(1,10)
this.movies = resp.data //獲取到data賦值給自己的數據，數據變了就會重新刷新渲染
},
template
}
最後我們直接在App組件中使用MovieContainer組件就可以了
最終的App.js
import MovieContainer from "./components/MovieContainer.js"
var template = `
<MovieContainer/>
`;
export default{
components:{
MovieContainer
},
template
}
最後我們就完成了多個電影頁面顯示，效果如圖
