當我們訪問一個網站時，瀏覽器會自動發送HTTP請求并等待服務器響應，然后從服務器獲得HTML、CSS、JavaScript等文件。如果網站的響應速度很慢，用戶可能會在等待期間感到不安，因此我們應該設法優化加載時間。其中一種方式是在加載期間顯示加載樣式，以便用戶知道網站正在加載。

Vue.js是一種用于構建用戶界面的JavaScript框架。它支持單向數據綁定、組件化開發和虛擬DOM，可以幫助我們更輕松地管理前端的代碼。在Vue.js中，我們可以使用v-if指令來判斷網站是否正在加載，并顯示相應的加載樣式。

HTML:
<div v-if="isLoading">
<div class="loading"></div>
<p class="loading-text">Loading...</p>
</div>
Vue.js:
new Vue({
el: '#app',
data: {
isLoading: true
}
})

在上面的代碼中，我們在HTML中使用v-if指令來判斷isLoading變量的值。如果isLoading為true，則顯示加載樣式。在Vue.js中，我們使用data屬性來定義變量，然后將其傳遞給HTML。在這個例子中，我們定義一個isLoading變量，并將其值設置為true。

在實際項目中，我們通常會在組件的mounted函數或在異步請求完成后將isLoading變量的值設置為false。這意味著當網站加載完成后，加載樣式將自動消失。

new Vue({
el: '#app',
data: {
isLoading: true
},
mounted() {
setTimeout(() => {
this.isLoading = false
}, 2000)
}
})

在上面的代碼中，我們使用Vue.js的生命周期函數mounted來設置setTimeout，延遲兩秒鐘后將isLoading變量的值設置為false。這意味著在兩秒鐘后，加載樣式將消失。當然，在實際項目中，我們可以使用異步請求完成函數來設置isLoading的值。

此外，我們還可以使用v-show指令來顯示或隱藏加載樣式，而不是v-if指令。v-show指令不會從DOM中刪除元素，而是使用CSS的display屬性將其隱藏。與v-if指令相比，使用v-show指令可以更快地切換元素的顯示和隱藏狀態。

<div v-show="isLoading">
<div class="loading"></div>
<p class="loading-text">Loading...</p>
</div>

在上面的代碼中，我們使用v-show指令來顯示或隱藏加載樣式。如果isLoading變量的值為true，則顯示加載樣式，否則隱藏加載樣式。

在使用Vue.js開發前端網站時，為了提高用戶體驗，我們可以使用多種技術來顯示加載樣式。使用v-if和v-show指令是Vue.js提供的兩種選擇，可以根據項目需求自由選擇。