我們書接上文，已經定義了兩個組件（list、commonFooter、homeHeader.vue），接下來寫home.vue：
<template lang="html">
<div class="container">
<home-header></home-header> <!-- 展示引入的header組件 -->
<div class="content">
<ul class="cont-ul">
<!-- list組件展示區(qū)，并用v-for來將數(shù)據遍歷，:xx="xxx" 是用來給子組件傳遞數(shù)據的 -->
<list v-for="item in items" :price="item.price" :title="item.title" :img="item.img"></list>
</ul>
</div>
<common-footer></common-footer> <!-- 展示引入的footer組件 -->
</div>
</template>
<script>
import HomeHeader from '../components/HomeHeader' /* 本頁面中用到了HomeHeader組件，所以就需要在這里引入一下 */
import CommonFooter from '../components/commonFooter'
import List from '../components/list'
export default {
data () {
return {
items: [] /* 定義一個空數(shù)組數(shù)據items */
}
},
components: {
HomeHeader,
CommonFooter,
List
},
created () { /* 這個是vue的鉤子函數(shù)，當new Vue()實例創(chuàng)建完畢后執(zhí)行的函數(shù) */
this.$http.get('/api/goods').then((data) => { /* 調用vue的ajax來請求數(shù)據，promise語法，并用es6的箭頭函數(shù) */
this.items = data.body.data;
})
}
}
</script>
<style lang="css" scoped>
.container {
width: 100%;
margin: 0 auto;
}
.content {
margin-bottom: 1.8rem;
}
.cont-ul {
padding-top: 0.5rem;
background-color: #ccc;
}
.cont-ul::after {
content: '';
display: block;
clear: both;
width: 0;
height: 0;
}
</style>
3. 商品詳情頁goodsDetail.vue：
a). DetailHeader.vue
<template lang="html">
<div class="head">
<div class="header">
<a href="javascript:;" class="go-back" @click="goBack">返回</a>
<h4 class="header-cont">商品詳情頁</h4>
</div>
</div>
</template>
<script>
export default {
methods: {
goBack () {
window.history.back();
}
}
}
</script>
<style lang="css" scoped>
.head{
height: 2rem;
}
.header{
width: 100%;
height: 2rem;
position: fixed;
left: 0;
top: 0;
background-color: #fff;
border-bottom: 2px solid #ccc;
}
.header .go-back {
width: 2rem;
height: 2rem;
text-align: center;
color: #ccc;
font-size: 0.8rem;
float: left;
line-height: 2rem;
margin-left: 1rem;
position: absolute;
left: 0;
top: 0;
}
.header .header-cont {
width: 100%;
text-align: center;
line-height: 2rem;
font-size: 1.2rem;
}
</style>
b). goodsDetail.vue
<template lang="html">
<div class="detail">
<detail-header></detail-header>
<p class="site-title">樹懶果園 泰國進口大金煌芒果</p>
<p class="site-cont">5斤裝，約2-4個果，大?。?！甜！??！</p>
<common-footer></common-footer>
</div>
</template>
<script>
import DetailHeader from '../components/DetailHeader'
import CommonFooter from '../components/commonFooter'
export default {
data () {
return {
}
},
components: {
DetailHeader,
CommonFooter
}
}
</script>
<style lang="css">
.detail {
padding: 0.25rem;
font-size: 12px;
}
.detail > img {
display: block;
width: 80%;
margin: 0 auto 0.5rem;
}
.detail > p {
font-size: 1.1rem;
line-height: 1.5rem;
text-align: left;
padding-bottom: 0.5rem;
}
.detail > p.site-title {
color: #ff8000;
}
.detail > p.site-cont {
color: #666;
font-size: 0.9rem;
}
</style>
