在呈现之前隐藏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在完全呈现之前使用该类来隐藏它.

在渲染之前,我正在显示一个带有一些动画进度条的loader元素.

渲染完成后,我只需调用element.show()jQuery并隐藏进度条.我的问题是:混合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);
}

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

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根据标志使用应用和删除类,如果要使用a覆盖整个页面,这很有用loader.

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

Answer 2

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

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

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

让我们编码 -在母版页中，

 <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