通過 AJAX 獲取數(shù)據(jù)是 Web 前端開發(fā)不可避免的一個(gè)過程，而Vue 正是以數(shù)據(jù)驅(qū)動為核心，并且在實(shí)際開發(fā)過程中與 AJAX 配合使用可以簡化開發(fā)過程、提高效率。下面我們將詳細(xì)介紹 Vue 中如何使用 AJAX 獲取數(shù)據(jù)并進(jìn)行展示。

在 Vue 中，通過 AJAX 獲取數(shù)據(jù)的方式主要有兩種：一種是通過 Vue-resource 進(jìn)行請求，一種是通過 Axios 進(jìn)行請求。這里我們以 Axios 舉例來介紹。

// 引入 Axios
import Axios from 'axios';
// 在 Vue 原型上添加 axios 屬性，在全局進(jìn)行使用
Vue.prototype.axios = Axios;
// 發(fā)送 GET 請求
this.axios.get('/api/data').then(response =>{
console.log(response);
}).catch(error =>{
console.log(error);
});
// 發(fā)送 POST 請求
this.axios.post('/api/data', { name: 'vue', age: 3 }).then(response =>{
console.log(response);
}).catch(error =>{
console.log(error);
});

上面的代碼中先引入了 Axios，并且在 Vue 的原型上添加 axios 屬性，這樣就可以在全局使用。使用 Axios 發(fā)送 GET 請求和 POST 請求時(shí)需要注意的是，用 then 方法接收成功的回調(diào)函數(shù)，用 catch 方法接收失敗的回調(diào)函數(shù)。

除了 Axios，還有一些其他的第三方庫也可以用于發(fā)起 AJAX 請求，比如 jQuery 和 fetch 等。這里為了演示方便，我們在控制臺中通過模擬返回?cái)?shù)據(jù)來實(shí)現(xiàn) AJAX 請求。

// 模擬返回?cái)?shù)據(jù)
const data = [
{
id: 1,
name: 'vue',
age: 3
},
{
id: 2,
name: 'react',
age: 5
},
{
id: 3,
name: 'angular',
age: 7
}
];
// 在 Vue 實(shí)例創(chuàng)建時(shí)獲取數(shù)據(jù)
export default {
data() {
return {
list: []
}
},
created() {
this.getList();
},
methods: {
// 發(fā)起 AJAX 請求
getList() {
setTimeout(() =>{
this.list = data;
}, 1000);
}
}
}

上面的代碼中通過 setTime 方法模擬了一個(gè) AJAX 請求，將獲取到的數(shù)據(jù)賦值給 Vue 實(shí)例中的 list 數(shù)組，再通過 v-for 指令將數(shù)據(jù)渲染出來。

以上就是 Vue 中使用 AJAX 獲取數(shù)據(jù)的詳細(xì)介紹。在實(shí)際開發(fā)中，我們需要根據(jù)具體情況選擇合適的 AJAX 庫進(jìn)行使用，同時(shí)要注意請求頭、請求方式、請求參數(shù)等相關(guān)問題，從而獲得想要的數(shù)據(jù)并正確展示在頁面上。