如何避免django模板在VueJS呈现之前显示

Question

我有一个Django模板，我试图用CDN呈现VueJs。问题是当页面被加载时，我看到的是Django的原始代码，在它被VueJS呈现之前带有分隔符。不到一秒钟。

我有一个API调用(使用Fetch)在显示它们之前检索一些数据，我把它放在mounted()函数中。延迟几乎是0.6秒，我们可以看到Django在vejs渲染页面之前就开始渲染了。

然后我将mounted()改为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;
}

确保在主#appdiv

中添加指令更多内容在这里在vue.js模板渲染前隐藏