页面加载时隐藏Vuejs语法

maybe this is a trivial question.

也许这是一个微不足道的问题。

so, when I run my vuejs application on browser with enables throttling download speed (sets to low connection). I got unfinished vue syntax output in browser.

因此，当我在浏览器上运行我的vuejs应用程序时，可以限制下载速度(设置为低连接)。我在浏览器中得到了未完成的vue语法输出。

I know we can trick this out with showing loading image before entire page has loaded, but it's there any best solution to fix this?

我知道在整个页面加载之前，我们可以用显示加载图像来解决这个问题，但是解决这个问题有什么最好的解决方案吗?

7 个解决方案

#1

You can use the v-cloak directive, which will hide the Vue instance until the compilation finishes.

您可以使用v-隐身指令，它将隐藏Vue实例直到编译完成。

HTML:

HTML:

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

CSS:

CSS:

[v-cloak] { display: none; }

#2

I attached the following codepen. You can see the difference with and without v-cloak.

我附上了下面的代码页。你可以看到有和没有v形斗篷的区别。

<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>

---

http://codepen.io/gurghet/pen/PNLQwy

http://codepen.io/gurghet/pen/PNLQwy

#3

As suggested by others using v-cloak is proper solution. However as @ DelightedD0D mentioned it IS clunky. Simple solution is to add some CSS in the pseudo selector ::before of v-cloak directive.

正如其他人所建议的，使用v形斗篷是合适的解决方案。然而，正如@ DelightedD0D提到的那样，它是笨拙的。简单的解决方案是在v-斗篷指令的伪选择器::before中添加一些CSS。

In your sass/less file something along the lines of

在你的sass/less文件中

[v-cloak] > * { display:none; }
[v-cloak]::before {
  content: " ";
  display: block;
  position: absolute;
  width: 80px;
  height: 80px;
  background-image: url(/images/svg/loader.svg);
  background-size: cover;
  left: 50%;
  top: 50%;
}

Of course you'd need to provide a valid and accessible path to loader image. It will render something like.

当然，您需要为加载器映像提供有效的和可访问的路径。它会呈现一些类似的东西。

Hope it helps.

希望它可以帮助。

#4

You could move any rendering to a simple wrapper component. The VueJS initialisation e.g. new Vue(....) shouldn’t contain any HTML apart from that single wrapper component.

您可以将任何呈现移动到一个简单的包装器组件。VueJS初始化如新Vue(....)不应该包含任何HTML除了单一包装器组件。

Depending on setup you could even have <app>Loading...</app> where app is the wrapper component with any loading HTML or text in between which is then replaced on load.

根据设置，你甚至可以有 加载… ， app为包装组件，加载HTML或文本，加载后替换。

#5

Use <v-cloak> to hide your Vue code before binding data to relevant places. It's actually located in a place on Vue documentation that anyone might miss it unless you search for it or read thoroughly.

在将数据绑定到相关位置之前，使用 隐藏您的Vue代码。它实际上位于Vue文档的某个位置，任何人都可能会错过它，除非您搜索它或彻底阅读它。 斗篷>

#6

Using v-cloak directive you can hide un-compiled mustache bindings until vue instance is done compiling. You must use the CSS block to hide it until compiled.

使用v-斗篷指令，您可以隐藏未编译的mustache绑定，直到vue实例完成编译。您必须使用CSS块来隐藏它，直到编译。

HTML:

HTML:

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

CSS:

CSS:

[v-cloak] {
  display: none;
}

This <div> will not be visible until the compilation is completed.

这个

在编译完成之前是不可见的。

You can see this link Hide elements during loading using v-cloak for better understating.

你可以看到这个链接隐藏元素在加载期间使用v-斗篷，以更好地低估。

#7

Yep, you can use v-cloak, I like use spinkit, is a great library with only CSS, check a simple example:

是的，你可以用v-斗篷，我喜欢使用spinkit，是一个只有CSS的很棒的库，检查一个简单的例子:

var vm = null;
    setTimeout(function() {
    	vm = new Vue({
         el: '#app',
        data: {
          msg: 'Is great, using: ',
          url: 'http://tobiasahlin.com/spinkit/'
         }
      });
     }, 3000);

#app .sk-rotating-plane,
[v-cloak] > * { display:none }
body{
	background: #42b983;
	color: #35495e;
}
#app[v-cloak] .sk-rotating-plane {
	display:block;
	background-color: #35495e;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tobiasahlin/SpinKit/master/css/spinkit.css">


<div id="app" v-cloak>
    <div class="sk-rotating-plane"></div>
    <h1>Vue with c-cloak</h1>
  <p>
    {{ msg }}
    <a :href='url'>{{ url }}</a>
  <p>
</div>

Link: - http://tobiasahlin.com/spinkit/

链接:http://tobiasahlin.com/spinkit/