商品列表頁要列出多項商品卡片，每一個商品卡片都要顯示商品名稱、簡介、縮圖、價格
有別於先前建立 components 的方式，為了達到維護簡易性，在 components 目錄下加入 ProductList.vue 來宣
告新的 components，一個 .vue 檔案包含三個區塊
template：component 的 html 內容
style：component 的 css 樣式設置，在 component 的樣式只侷限在該 component 及其子 component 的
範圍
script：script 內容，一般會將 component 的定義類別放在此區塊內
透過使用條件渲染 v-for 將多個商品資料加入至 product-container 中，並利用 data-binding 的方式將 data 中的商品資訊顯示在頁面

<template>
<div>
<div class="product-container" v-for="item in products" :key="item.id">
<div class="product-image">
<img class="img-responsive" :src="item.imgUrl"/>
</div>
<div class="product-info">
<div class="product-title">{{ item.name }}</div>
<div class="product-content">{{ item.desc }}</div>
<span class="product-price">{{ item.price }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ProductList',
data() {
return {
products: [
{
id: 1,
name: 'Car',
imgUrl: 'https://images.pexels.com/photos/1200458/pexels-photo-1200458.jpeg?
auto=compress&cs=tinysrgb&h=350',
desc: 'A luxury car you won\'t miss it.',
price: 199.99,
},
{
id: 2,
name: 'Bike',
imgUrl: 'https://images.pexels.com/photos/1239460/pexels-photo-1239460.jpeg?
auto=compress&cs=tinysrgb&h=350',
desc: 'A durable bike you\'ve never ride.',
price: 25.00,
},
],
};
},
};
</script>
<style>
.product-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
padding: 5px;
margin: 4px 2px;
background: #eee;
border-radius: 3px;
font-family: sans-serif;
}
.product-image {
display: flex;
width: 30%
}
.product-image img {
align-self: center;
width: 100%;
height: auto;
}
.product-info {
display: flex;
padding: 5px 8px;
flex-direction: raw;
flex-wrap: wrap;
align-content: space-between;
width: 70%;
}
.product-title {
width: 100%;
font-size: 1.5em;
font-weight: bold;
}
.product-content {
width: 100%;
font-size: 1em;
}
.product-price {
width: 100%;
font-size: 1.1em;
color: rgba(255, 30, 0, 0.884);
text-align: right;
}
</style>

並在 ProductApp.vue 加入 component 的引用，以及使用 product-list element

<template>
<div id="productApp">
<h1>Product App!</h1>
<product-list></product-list>
</div>
</template>
<script>
import ProductList from '@/components/ProductList';
export default {
components: {
ProductList,
},
};
</script>