Vue.js是一款流行的JavaScript框架，允許您快速創建交互式和可重用組件，但有時需要從外部API獲取數據以在Vue應用程序中使用。在這種情況下，Vue API可以使用Vue的axios庫來處理數據請求。以下是使用Vue API和axios庫獲取數據的示例。
// 導入Vue和axios庫
import Vue from 'vue';
import axios from 'axios';
// 創建Vue實例
new Vue({
el: '#app',
data() {
return {
items: [],
searchInput: '',
};
},
methods: {
fetchData() {
// 使用axios發送請求
axios.get(`https://jsonplaceholder.typicode.com/users?q=${this.searchInput}`)
.then(response =>{
// 將數據保存在items數組中
this.items = response.data;
})
.catch(error =>{
console.log(error);
});
}
},
template: `- {{ item.name }}
`
});以上示例中，我們創建了一個新Vue實例，并定義了以下內容：
- items數組，將從API中獲取的數據保存在其中
- searchInput變量，將保存用戶的搜索查詢
- fetchData方法，將使用axios庫從API獲取數據并保存在items數組中
- template，包含搜索框，搜索按鈕和顯示結果的列表
對于axios.get()請求，我們傳遞了API端點URL，并使用對象字面量參數傳遞查詢參數，即用戶的搜索查詢。在.then()方法中，我們將保存在響應對象中的數據保存在Vue實例的items數組中。
在模板中，我們顯示了搜索框，搜索按鈕和結果列表。使用v-for指令迭代items數組并顯示每個結果中的name屬性。