在Web開發(fā)中，我們經(jīng)常需要從接口獲取數(shù)據(jù)來渲染頁面，這個過程有時候會讓人頭疼。然而，Vue提供了方便的接口數(shù)據(jù)獲取方法，只需要簡單幾步就能實現(xiàn)數(shù)據(jù)的獲取并展示在頁面上。

首先，我們需要安裝一個插件——vue-resource，這個插件能夠更方便的處理HTTP請求。我們可以通過npm來進行安裝：

npm install vue-resource --save

這里我們使用npm命令來進行安裝并保存到我們的項目中。

接下來，在我們的Vue組件中添加一個created生命周期函數(shù)，生命周期函數(shù)是Vue提供的鉤子函數(shù)，在組件創(chuàng)建完畢后會自動執(zhí)行里面的代碼。我們在這里使用this.$http.get()方法向接口發(fā)送一個GET請求，并將數(shù)據(jù)保存在組件的data中：

export default{
data(){
return{
items:[]
}
},
created(){
this.$http.get('/api/items').then((res)=>{
this.items = res.body;
})
}
}

這里我們使用了ES6的箭頭函數(shù)來處理請求數(shù)據(jù)并賦值給我們的items數(shù)組。當(dāng)然，在這個例子中，我們僅僅打印了數(shù)據(jù)，接下來我們需要使用v-for指令來渲染列表：

<ul>
<li v-for="item in items">{{item.text}}</li>
</ul>

在這里，我們使用了v-for指令，在一個列表中循環(huán)渲染我們的數(shù)據(jù)，并使用{{item.text}}來動態(tài)地呈現(xiàn)每個列表項的數(shù)據(jù)。

當(dāng)然，如果我們需要發(fā)送POST請求，那么我們可以使用this.$http.post()來發(fā)送一個POST請求，代碼和GET請求十分相似：

created(){
this.$http.post('/api/items',{
text:'hello world'
}).then((res)=>{
this.items.push(res.body);
});
}

這里我們使用了一個POST請求，在發(fā)送數(shù)據(jù)給我們需要的接口時，我們同時也將數(shù)據(jù)插入到了我們的items數(shù)組中。

值得注意的是，在使用this.$http.post()時，我們需要將需要發(fā)送的數(shù)據(jù)以對象的形式傳入requestBody中，這里的text:'hello world'就很好地指定了我們需要發(fā)送的數(shù)據(jù)。

至此，我們成功地使用Vue接受并展現(xiàn)了后端接口數(shù)據(jù)，Vue提供了豐富的API使得我們能夠輕松地從接口獲取數(shù)據(jù)和向接口發(fā)送數(shù)據(jù)。