Vue是一種現代化的JavaScript框架，它提供了一組工具和組件，可以幫助開發人員快速構建大型單頁面應用程序（SPA）。

Axios是Vue中常用的一種針對HTTP請求的Promise based（基于“Promise”）的HTTP客戶端，它被廣泛認為是JavaScript中最簡單，最流行的方式之一，可用于在瀏覽器和Node.js中發送異步HTTP請求。

npm install axios

首先安裝axios，如果您使用的是Vue CLI，則axios會自動添加為依賴項，您不需要手動安裝。

import axios from 'axios'
export default {
mounted () {
axios
.get('/api/some-data')
.then(response =>(this.data = response.data))
}
}

在Vue組件中使用axios非常簡單。確定每個頁面只能在組件的鉤子函數中訪問數據時，mounted是可取的，尤其是當提供器路由導航使用時。在mounted中，我們可以通過axios獲取數據并將其附加到組件的狀態中。axios使用Promise結果返回，因此您可以使用.then和.catch方法處理成功和失敗情況。

<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
items: []
}
},
mounted () {
axios
.get('/api/items')
.then(response =>{
this.items = response.data
})
}
}
</script>

當您在組件上使用axios時，您可以使用數據屬性item上的v-for指令來迭代每個項目并顯示其屬性。然后，您在組件上使用mounted鉤子函數來獲取數據并將其分配給該組件的items屬性。