我们书接上文，已经定义了两个组件（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组件展示区，并用v-for来将数据遍历，:xx="xxx" 是用来给子组件传递数据的 -->
<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: [] /* 定义一个空数组数据items */
}
},
components: {
HomeHeader,
CommonFooter,
List
},
created () { /* 这个是vue的钩子函数，当new Vue()实例创建完毕后执行的函数 */
this.$http.get('/api/goods').then((data) => { /* 调用vue的ajax来请求数据，promise语法，并用es6的箭头函数 */
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>
