繪制商品列表結(jié)構(gòu)
- 新建GoodsList.vue組件制作商品列表
- 商品列表的布局
- 商品的圖片，名稱佩脊，價格，以及庫存
<div class="goods-item">
<img src="../../images/小米.jpg" />
<h1 class="title">小米（mi）小米Note 16G雙網(wǎng)通版</h1>
<div class="info">
<p class="price">
<span class="now">￥2199</span>
<span class="old">￥2399</span>
</p>
<p class="sell">
<span>熱賣中</span>
<span>剩余60件</span>
</p>
</div>
</div>
- 設(shè)置商品列表的樣式使用flex布局使兩個商品并排，向兩邊對齊质况，設(shè)置邊距低零，商品價格庫存的背景，并將它和商品圖片名稱以flex布局的方式改變flex的默認(rèn)值拯杠，使它們分別向上下對齊
<style scoped>
.goods-list{
display: flex;
flex-wrap: wrap;
padding: 7px;
justify-content: space-between;
}
.goods-item{
width: 49%;
border: 1px solid #cccccc;
box-shadow: 0 0 8px #cccccc;
margin: 4px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.goods-item>img{
width: 100%;
height: 600px;
}
.title{
font-size: 14px;
}
.info{
background-color: #eee;
}
.info>p{
margin: 0px;
padding: 5px;
}
.now{
color: red;
font-weight: bold;
font-size: 16px;
}
.old{
text-decoration: line-through;
font-size: 12px;
margin-left: 10px;
}
.sell{
display: flex;
justify-content: space-between;
font-size: 13px;
}
</style>
- 在手機(jī)中調(diào)試項(xiàng)目
- 手機(jī)和電腦處于同一個局域網(wǎng)
- 在package.son文件中掏婶，在dev 腳本中添加一個--host指令，把當(dāng)前電腦的IP地址設(shè)置為—host的指令值
商品詳情頁面
- 新建GoodsInfo.vue組件潭陪，引入組件雄妥，設(shè)置匹配規(guī)則
import GoodsInfo from './components/goods/GoodsInfo.vue'
{path:'/home/goodsinfo/:id',component:GoodsInfo}
- 網(wǎng)頁中的兩種跳轉(zhuǎn)方式
- 使用a標(biāo)簽的形式進(jìn)行跳轉(zhuǎn)（router-link也屬于a標(biāo)簽）
- 使用window.location.href的形式，叫做編程式導(dǎo)航
- 使用JS的形式進(jìn)行路由導(dǎo)航依溯，使用router.push方法跳轉(zhuǎn)頁面
- this.
router的區(qū)分
- this.$route是路由的參數(shù)對象老厌，所有路由中的參數(shù)都屬于它
- this.$router是一個路由導(dǎo)航對象，用它可以使用js代碼實(shí)現(xiàn)路由的跳轉(zhuǎn)黎炉，綁定click
goDetail(id){
$router.push('/home/goodsinfo/'+id)
