如何避免在 VueJS 渲染之前显示 django 模板答案

【问题标题】：How to avoid having django template display before VueJS render如何避免在 VueJS 渲染之前显示 django 模板
【发布时间】：2021-12-14 23:34:19
【问题描述】：

我有一个 Django 模板，我正在尝试使用 CDN 使用 VueJ 进行渲染。问题是当页面加载时，我看到带有分隔符的 Django 原始代码，然后再用 VueJS 渲染它。不到一秒。

我有一个 API 调用（使用 Fetch）在显示之前检索一些数据，然后我将其放入 mount() 函数中。延迟几乎是 0.6 秒，我们可以看到 Django 在 vuejs 渲染页面之前渲染。

然后我将mounted() 更改为beforeMount()。我现在时不时会看到 Django 渲染，但它好多了，因为通常 vue 渲染是第一位的。

有没有更好的方法来解决这个问题？我正在使用 CDN，我不想进入这个项目的服务器端渲染。

【问题讨论】：

请说明你的意思。对于不需要的标记输出，可以使用隐藏（body 或带有display:none 的 CSS 类的某些元素输出，然后在 JS 中删除一个类），但主要问题是服务器端代码不应泄漏到外部根本就是服务器应用，不安全
谢谢埃斯图斯，实际上我刚刚通过文档找到了答案，也回到了 stackOver stackoverflow.com/questions/42262007/…
我明白了，所以你的意思是 Vue 分隔符。那就ok了，v-cloak就行了。

【解决方案1】：

指令 v-cloak 解决它。

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

搭配风格

[v-cloak] {
  display: none;
}

请确保在主#app div 中添加指令

【讨论】：