復習のため改めてVue.jsを勉強していこうと思い、まずは商品データを描画することまでやりました。まだまだ素人の私には理解不足ですが、コツコツ勉強し、また出来ましたら更新・掲載していきます。宜しくお願い致します。
途中経過の作品はこちらです。
HTML
<div id=”app”>
<div class=”container”>
<h1 class=”pageTitle”>商品一覧</h1>
<!– 検索欄 –>
<div class=”search”>
<div class=”result”>
検索結果<span class=”count”>6件</span>
</div>
<div class=”condition”>
<div class=”target”>
<label><input type=”checkbox”>セール対象</label>
<label><input type=”checkbox”>送料無料</label>
</div>
<div class=”sort”>
<label for=”sort”>並び変え</label>
<select id=”sprt” class=”sorting”>
<option value=”1″>標準</option>
<option value=”2″>価格が安い順</option>
</select>
</div>
</div>
</div><!–search–>
繰り返す商品データは、dataオプションに「products」という名前の配列で定義したので、v-forを使ってバインドしています。v-forで宣言したproductには、productsの配列要素が繰り返しのたびに代入されます。
<div class=”list”>
<div class=”item” v-for=”product in products“>
<figure class=”image”>
<template v-if=”product.isSale“>
<div class=”status”>SALE</div>
</template>
<img v-bind:src=”product.image” alt=””>
<figcaption>{{product.name}}</figcaption>
</figure>
<div class=”detail”>
<div class=”price”><span>{{product.price}}</span>円（税込み）</div>
<template v-if=”product.delv == 0″>
<div class=”shipping-fee none” >送料無料</div>
</template>
<template v-else>
<div class=”shipping-fee”> +送料{{product.delv}}円</div>
</template>
</div>
</div><!–item–>
</div><!–list–>
</div><!–container–>
</div><!–app–>
CSS
body {
background: #000;
color: #fff;
}
.container {
width: 960px;
margin:0 auto;
}
.pageTitle {
font-weight: normal;
border-bottom: 2px solid;
}
.search {
display: flex;
justify-content: space-between;
}
.search .target {
display: inline-block;
}
.search .target label {
margin-right: 15px;
}
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list::after {
content: “”;
display: block;
width: 250px;
}
.item {
flex: 0 1 250px;
margin-bottom: 30px;
}
.item .image {
position: relative;
text-align: center;
}
.item .image img {
width: 100%;
height: auto;
}
.item .status {
position: absolute;
border-radius: 50%;
width: 4em;
height: 4em;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #bf0000;
color: #fff;
}
.item .detail {
text-align: center;
}
.item .price {
display: inline-block;
}
.item .price span {
font-size: 180%;
}
.item .shipping-fee {
display: inline-block;
background: #f7cd12;
color: #000;
}
.item .shipping-fee.none {
background: #bf0000;
color:#fff
}
JavaScript
dataオプションにデータを定義していく。
countを「6」ではなく「0」としている理由は、この段階では商品データをコンポーネント内に定義していますが、実際のアプリケーションではサーバーから商品データを動的に読み込むので、ページを表示するまで商品数は確定しません。そのためcountには、一般的に数値型の変数の初期値として使われる「0」を設定しております。
var app = new Vue({el:’#app’,
data:{
// 表示中の商品数
count: 0,
//セール対象のチェック状態 true:チェック有り false:チェック無し
showSaleItem:false,
//送料無料のチェック状態 true:チェック有り false:チェックなし
showDelvFree: false,
//並び替えの選択 １：標準 ２：価格が安い順
sortOrder:1,
//商品リスト
products:[
{name:’Micheal<br>スマホケース’, price:1580, image:’01.jpg’, delv:0, isSale:true },
{name:’Raphael<br>スマホケース’, price:1580, image:’02.jpg’, delv:0, isSale:true },
{name:’Gabriel<br>スマホケース’, price:1580, image:’03.jpg’, delv:240, isSale:true },
{name:’Uriel<br>スマホケース’, price:980, image:’04.jpg’, delv:0, isSale:true },
{name:’Ariel<br>スマホケース’, price:980, image:’05.jpg’, delv:0, isSale:false },
{name:’Azrael<br>スマホケース’, price:1580, image:’06.jpg’, delv:0, isSale:false }
]
}
});
この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT） その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。
わからないことはプロフェッショナルから学ぶのが一番
キャリアアップに必要なスキルを取得しよう。
オンラインで受講ができるスクールですので、全国どこからでも。
