如何避免在 VueJS 渲染之前顯示 django 模板

Question

我有一個 Django 模板，我正在嘗試使用 CDN 用 VueJs 渲染它。 問題是當頁面加載時，我看到了帶有分隔符的 Django 原始代碼，然后它被 VueJS 呈現。 不到一秒鍾。

我有一個 API 調用（使用 Fetch），它在顯示之前檢索一些數據，並將其放入 mount() 函數中。 延遲幾乎是 0.6 秒，我們可以在 vuejs 渲染頁面之前看到 Django 渲染。

然后我將 mount() 更改為beforeMount() 。 我現在不時看到 Django 渲染，但它好多了，因為通常，vue 渲染是最先出現的。

有沒有更好的方法來解決這個問題？ 我正在使用 CDN，我不想進入這個項目的服務器端渲染。

Answer 1

指令 v-cloak 解決了它。

<div id="#app">
    <div v-cloak>
       [[ message ]]  // Vue delimiters for django.
    </div>
</div>

與風格

[v-cloak] {
  display: none;
}

Juste 確保在主 #app div 中添加指令

更多內容在這里隱藏 vue.js 模板在呈現之前