在渲染之前隐藏 vue.js 模板

Question

我试图在完全呈现之前隐藏 vue.js 模板的内容。考虑以下模板：

 <div class="loader">
  <table class="hidden">
    <tr v-for="log in logs">
      <td>{{log.timestamp}}</td>
      <td>{{log.event}}</td>
    </tr>
  </table>
</div>

当我在服务器上渲染此模板时，用户会在渲染之前看到 <tr> 元素的内容。出于这个原因，我使用类 hidden 在完全渲染之前隐藏它。

同样在渲染之前，我展示了一个带有一些动画进度条的加载器元素。

渲染完成后，我只需在 jQuery 中调用 element.show() 并隐藏进度条。我的问题是：可以混合使用 jQuery 和 vue.js 来实现这一点吗？

 var vueLogs = new Vue({
  el: "#checkInLogsHolder",
  data: {logs: []}
});
var holder = $("#checkInLogsHolder");

function response(payload) {
  // hiding the loader animation
  holder.find(".loader").remove();
  // showing the rendered table
  holder.find("table").show();
  vueLogs.logs.unshift(payload);
}

有没有更好的方法来做到这一点？

原文由 Vojtěch 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue 已经内置了 v-cloak 指令，你只需要添加相关的 css 类：

 [v-cloak] {
  display: none;
}

然后将其应用到您的元素，如下所示：

 <div v-cloak>
  {{message}}
</div>

这是 JSFiddle： https ://jsfiddle.net/2jbe82hq/

如果您在该小提琴中删除 v-cloak 您将在安装实例之前看到带胡子的 {{message}} 。

如果要在从服务器检索数据时显示 loader ，则将布尔标志与 v-if 结合起来以显示和隐藏加载程序：

 var vm = new Vue({
  el: "#app",
  created(){
    this.$http.get('url').then(response => {
      // set loader to false
      this.loading = false;
    });
  },
  data: {
    message: 'Hello Vue!',
    loading: true
  }
});

然后你可以这样做：

 <div v-if="loading">
   Loading...
</div>
<div v-else>
    {{message}}
</div>

这是 JSFiddle： https ://jsfiddle.net/fa70phLz/

也可以使用 loading 类，然后使用 v-bind:class 应用和删除基于标志的类，如果你想用 loader 。

 <div :class="{'loading': loading}"></div>

原文由 craig_h 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我只是 在渲染完整的 HTML 文件之前添加了一个有用的 v-cloak 的东西来添加一个 _微调器_， 并感谢 Adam 的 Gist - https://gist.github.com/adamwathan/3584d1904e4f4c36096f

如果你想在加载页面之前添加一个微调器，你可以阅读这个 -

• 添加 v-cloak 里面 #app 。
• 制作一个 div v-cloak--inline 我们要在 HTML 页面呈现之前显示。
• 另一个 Div 将包含 v-cloak--hidden 的整页。
• 必须添加这里给出的css。

让我们编码 - 在 Master Page 中，

  <div id="app">

  <div v-cloak>

   <div class="v-cloak--inline"> <!-- Parts that will be visible before compiled your HTML -->
      <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
      <span class="sr-only">Loading...</span>
   </div>

   <div class="v-cloak--hidden"> <!-- Parts that will be visible After compiled your HTML -->
      <!-- Rest of the contents -->
      @yield('content')
   </div>

  </div>

</div>

为 v-cloak 添加这些额外的 CSS。

 [v-cloak] .v-cloak--block {
  display: block;
}
[v-cloak] .v-cloak--inline {
  display: inline;
}
[v-cloak] .v-cloak--inlineBlock {
  display: inline-block;
}
[v-cloak] .v-cloak--hidden {
  display: none;
}
[v-cloak] .v-cloak--invisible {
  visibility: hidden;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
  display: none;
}

然后在编译 HTML 文件之前，将渲染一个微调器。编译后，微调器将隐藏。您可以在母版页中使用它。因此，每次加载新页面时，都会看到效果。

请参阅要点 - https://gist.github.com/adamwathan/3584d1904e4f4c36096f

原文由 Maniruzzaman Akash 发布，翻译遵循 CC BY-SA 3.0 许可协议