在現代的Web開發中，很多應用都需要與后端交互來獲取數據。然而，在這個過程中，我們常常會遇到需要等待服務器響應的情況。這時，為了提高用戶體驗，我們需要添加一個loading框。在Vue中，實現這一功能非常簡單，只需要添加幾行代碼即可。

首先，我們需要在Vue實例中添加一個data對象來控制loading框的顯示狀態：

data() {
return {
loading: true,
data: []
}
}

這里我們把loading初始化為true，表示在初始化過程中要顯示loading框。

接下來，在請求數據的過程中，我們需要將loading狀態改為false來隱藏loading框，同時在數據請求結束后將數據保存到data中：

methods: {
fetchData() {
this.loading = true;
axios.get('/api/data')
.then((response) =>{
this.data = response.data;
this.loading = false;
})
.catch((error) =>{
console.log(error);
this.loading = false;
});
}
}

這里我們使用了axios來發起請求，并在請求成功后將返回的數據保存到data中。當請求發生錯誤時，我們也需要將loading狀態設為false，以便隱藏loading框。

現在我們已經控制了loading框的顯示狀態，接下來我們需要在頁面中渲染出一個loading框。在Vue中，我們可以利用v-if指令來根據loading狀態來決定是否顯示loading框：

現在我們通過v-if指令根據loading狀態來決定是否渲染loading框。當loading為true時，渲染一個名為loading的div并添加樣式來美化它。當loading為false時，我們就可以渲染出請求到的數據了。

當然，這只是最基本的應用場景。當我們需要同時發起多個請求時，我們也可以通過一些技巧來控制loading框的顯示狀態。例如可以通過Promise.all()來發送多個請求，并在所有請求完成后隱藏loading框。

總的來說，通過Vue來控制loading框的顯示狀態非常簡單，并且可以為我們的應用增加不少用戶體驗。同時，在實際應用中，我們也可以通過樣式來美化loading框，讓它更好看，讓用戶更愿意等待。希望這篇文章能對你有所幫助！