Vue.js防止佈局跳轉

我有幾個Vue.js組件導致內容在加載時被推到一邊。Vue.js防止佈局跳轉

爲了解決這個問題，我創建了一些CSS規則是specfically針對我的Vue組件自定義HTML標記，像這樣組成：

custom-tag { 
    float: left; 
    width: 150px; 
    // etc. 
}

這個例子將是一個CustomTag.vue。當Vue.js尚未將相應的Vue.js組件的自定義標籤換出時，這將會生效。所以這實際上確保我的佈局是正確的，即使沒有JavaScript。

雖然這工作正常，但這還遠遠沒有完美的解決方案。我覺得即使Vue.js被緩存並放入一個單獨的供應商文件（只有135KB）（gzipped），它也需要很長時間才能生效。

我很難找到任何關於Vue.js的真實解決方案或信息，所以我想知道別人怎麼處理這個問題？這是一個問題，我的結束JavaScript不加載速度不夠快或什麼？

2017-05-17 Stephan-v

您可能有興趣使用[v-cloak]（https://vuejs.org/v2/api/#v-cloak） –

@Roy v-cloak用於在Vue之前從文檔中移除花括號標籤已加載。我正在討論在組件加載之前爲組件設置了默認值。這是完全不同的東西。沒有語法來掩飾開始。 –

v-cloak *可以*用於去除花括號標籤，但您可以用它來以任何喜歡的方式區分加載之前和加載之後。 –

這很奇怪，但也許它可能是非常長的模板，引擎必須在渲染前進行編譯。

你應該首先考慮你的模板。我猜你不會這樣做，如果你的HTML中有自定義標記在渲染之前...... 如果可以，使用single file components。如果你來自React，你也可以發現jsx for Vue有用，或者甚至手工編寫渲染功能（雖然不推薦）。

如果你想完全消除第一次渲染的時間，唯一的辦法就是做server-side rendering。所以你的應用程序將會與最初的html結構一起提供。

2017-05-19 08:04:04 Cobaltway

回答