Vue 作為一門 JavaScript 框架，可以方便地和 API 進行交互。在使用 Vue 進行前端開發時，經常需要從后端 API 中獲取數據，然后將數據展示到前端頁面上。下面我們將介紹如何在 Vue 中接收 API 返回的數據。

在 Vue 的代碼中，可以使用 Axios 這個 JavaScript 庫來進行 HTTP 請求。Axios 可以方便地發送 GET、POST、PUT、DELETE 等請求，并且可以很好地處理 API 返回的數據。

// 通過 Axios 發送 GET 請求
axios.get("https://api.example.com/users")
.then(response =>{
// 請求成功，數據存儲在 response.data 中
console.log(response.data);
})
.catch(error =>{
// 請求失敗，error 中包含錯誤信息
console.log(error);
});

上面的代碼中，我們使用 Axios 發送了一個 GET 請求，請求地址是 https://api.example.com/users。當請求成功時，會在控制臺中輸出獲取到的數據；當請求失敗時，會在控制臺中輸出錯誤信息。

在 Vue 中，通常將 API 返回的數據存儲在組件的 data 中。在組件的 created 鉤子函數中，可以進行請求數據的操作，并將獲取到的數據存儲在組件的 data 中。

// 在 Vue 組件中使用 Axios 獲取數據
export default {
data() {
return {
users: []
};
},
created() {
axios.get("https://api.example.com/users")
.then(response =>{
// 將獲取到的數據存儲在組件的 data 中
this.users = response.data;
})
.catch(error =>{
console.log(error);
});
}
}

在上面的代碼中，我們在組件的 data 中定義了一個 users 數組，然后在 created 鉤子函數中使用 Axios 獲取數據，并將獲取到的數據存儲在 users 數組中。

在 Vue 的模板中，我們可以使用 v-for 指令來遍歷數組，并將數組中的元素渲染到頁面上。

// 在 Vue 模板中使用 v-for 渲染數據
{{ user.name }}

在上面的代碼中，我們使用 v-for 指令遍歷了 users 數組，并將數組中的每個元素渲染到了列表中。使用 :key 屬性可以幫助 Vue 進行優化，提高頁面渲染的效率。

總結：在 Vue 中，可以使用 Axios 發送 HTTP 請求。通常將 API 返回的數據存儲在組件的 data 中，并可以使用 v-for 指令遍歷數據并在模板中渲染到頁面上。