Vue.js 是一個流行的前端框架，它的主要特點是靈活性和可重用性。在此，我們來討論一個 Vue.js 的項目——Goods 頁面，它是一個非常常見的電商平臺的產品展示頁面。

在這個頁面中，商品是來自于 API 的。API 是一種存放在服務器端的接口，可以通過 URL 進行訪問。從 API 中得到商品數據后，Vue.js 是如何對其進行處理的呢？

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

以上是獲取商品數據并存儲到本地的 Vue.js 代碼，接下來我們看看如何在頁面上展示商品：

以上是一個包含商品信息的模板代碼，其中 v-for 屬性與 goods 數組的長度相等，也就是會循環 goods 數組中的商品，基于每個商品的 id，我們使用了一個 key 屬性來進行區分。

通過這些 Vue.js 代碼，我們可以得到一套支持 API 數據請求的動態商品展示頁面，它為電商網站或其他類型的商品展示網站提供了方便的解決方案。