在渲染之前隐藏 vue.js 模板 [英] Hiding vue.js template before it is rendered

问题描述

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

<table class="隐藏"><tr v-for="登录日志"><td>{{log.timestamp}}</td><td>{{log.event}}</td></tr>

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

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

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

var vueLogs = new Vue({el: "#checkInLogsHolder",数据:{日志:[]}});var holder = $("#checkInLogsHolder");功能响应(有效载荷){//隐藏加载器动画holder.find(".loader").remove();//显示渲染表持有人.查找(表").显示()；vueLogs.logs.unshift(payload);}

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

解决方案

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

[v-cloak] {显示:无；}

然后像这样将它应用到你的元素上:

{{信息}}

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

如果你删除那个 fiddle 中的 v-cloak，你会在实例被挂载之前看到带有胡子的 {{message}}.

如果您想在从服务器检索数据时显示 loader，则可以将布尔标志与 v-if 结合以显示和隐藏加载器:

var vm = new Vue({el: "#app",创建(){this.$http.get('url').then(response => {//将加载器设置为 falsethis.loading = false;});},数据: {消息:'你好 Vue！',加载:真实}});

然后你可以这样做:

正在加载...
<div v-else>{{信息}}

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

也可以使用 loading 类，然后使用 v-bind:class 根据标志应用和删除类，如果你想用 loader 覆盖整个页面.

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

I am trying to hide the vue.js template's contents before it is fully rendered. Consider following template:

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

When I render this template on the server, the user sees the contents of the <tr> element before it is rendered. For this reason I use the class hidden to hide it, before it is fully rendered.

Also before it is rendered, I am showing a loader element with some animated progressbar.

Once it is rendered, I would just call element.show() in jQuery and hide the progressbar as well. My question is: is it okay to mix jQuery and vue.js to achieve this?

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);
}

Is there some better way to do this?

解决方案

Vue already has a v-cloak directive built in, you just need to add the relevant css class:

[v-cloak] {
  display: none;
}

And then apply it to your element like so:

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

Here's the JSFiddle: https://jsfiddle.net/2jbe82hq/

If you remove v-cloak in that fiddle you will see the mustached {{message}} before the instance has been mounted.

If you want to display a loader while you retrieve data from your server, then you combine a boolean flag with v-if to show and hide the loader:

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
  }
});

You can then do:

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

Here's the JSFiddle for that: https://jsfiddle.net/fa70phLz/

It's also possible to use a loading class as well and then use v-bind:class to apply and remove the class based on the flag, which is useful if you want to overlay the entire page with a loader.

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

这篇关于在渲染之前隐藏 vue.js 模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！