Vue.js 是一個(gè)流行的前端框架，它的主要特點(diǎn)是靈活性和可重用性。在此，我們來(lái)討論一個(gè) Vue.js 的項(xiàng)目——Goods 頁(yè)面，它是一個(gè)非常常見(jiàn)的電商平臺(tái)的產(chǎn)品展示頁(yè)面。

在這個(gè)頁(yè)面中，商品是來(lái)自于 API 的。API 是一種存放在服務(wù)器端的接口，可以通過(guò) URL 進(jìn)行訪(fǎng)問(wèn)。從 API 中得到商品數(shù)據(jù)后，Vue.js 是如何對(duì)其進(jìn)行處理的呢？

data () {
return {
goods: [] // 用于存放商品的數(shù)組
}
},
methods: {
getGoods () {
Axios.get('/goods')
.then(res =>{
this.goods = res.data // 將 API 返回的商品數(shù)組存入本地的 goods 數(shù)組中
})
.catch(err =>console.log(err))
}
},
created () {
this.getGoods() // 在頁(yè)面創(chuàng)建時(shí)，調(diào)用 getGoods 方法獲取商品數(shù)據(jù)
}

以上是獲取商品數(shù)據(jù)并存儲(chǔ)到本地的 Vue.js 代碼，接下來(lái)我們看看如何在頁(yè)面上展示商品：

以上是一個(gè)包含商品信息的模板代碼，其中 v-for 屬性與 goods 數(shù)組的長(zhǎng)度相等，也就是會(huì)循環(huán) goods 數(shù)組中的商品，基于每個(gè)商品的 id，我們使用了一個(gè) key 屬性來(lái)進(jìn)行區(qū)分。

通過(guò)這些 Vue.js 代碼，我們可以得到一套支持 API 數(shù)據(jù)請(qǐng)求的動(dòng)態(tài)商品展示頁(yè)面，它為電商網(wǎng)站或其他類(lèi)型的商品展示網(wǎng)站提供了方便的解決方案。