页面加载后呈现的Vue语法

Question

我是Vue.js的新手。我目前在asp.net核心上使用Vue.js。

我注意到在呈现Vue.js语法之前，在99％的时间内提供了页面。如何防止这种情况发生？

例如

第一次加载页面时，我会看到

<ol>
<li v-for="u in subscribers">{{ u.name }} - {{u.email}}</li>
</ol>

然后一秒钟后，我看到

<ol>
<li>John - john@domain.com</li>
<li>John1 - joh1n@domain.com</li>
</ol>

Answer 1

由于模板是在页面HTML代码中编写的，因此在加载页面时，浏览器始终会首先显示该模板。通常，Vue组件都包含一个用于呈现数据的模板，这种情况不会发生。

您可以采用写在页面上的模板并将其添加到Vue component中，以便它将使用它来呈现页面，而不是页面内容。最简单的方法是将模板作为参数添加到Vue组件中，但是稍后使用单独的模板文件或Single File Components可能会更好。