Javascript 如何在页面加载时隐藏 VueJS 语法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36186831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I hide the VueJS syntax while the page is loading?
提问by antoniputra
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 imagebefore entire page has loaded, but it's there any best solution to fix this?
我知道我们可以通过在整个页面加载之前显示加载图像来解决这个问题，但是有没有最好的解决方案来解决这个问题？
回答by Gus
回答by gurghet
I attached the following codepen. You can see the difference with and without v-cloak.
我附上了以下代码笔。你可以看到有和没有的区别v-cloak。
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>
回答by schartz
As suggested by others using v-cloakis proper solution. However as @ DelightedD0D mentioned it IS clunky. Simple solution is to add some CSS in the pseudo selector ::beforeof v-cloakdirective.
正如其他人所建议的那样，使用v-cloak是正确的解决方案。然而，正如@ DelightedD0D 提到的那样，它很笨重。简单的解决方案是在指令的伪选择器::before中添加一些 CSS v-cloak。
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.
希望能帮助到你。
回答by Summonjoy
Using v-cloakdirective 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-cloak指令可以隐藏未编译的 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.
这<div>在编译完成之前是不可见的。
You can see this link Hide elements during loading using v-cloakfor better understating.
您可以看到此链接在加载过程中隐藏元素v-cloak以更好地低估。
回答by ysdx
Don't include any vuejs syntax in the HTML file:
不要在 HTML 文件中包含任何 vuejs 语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>
In your main JavaScript, you can:
在您的主要 JavaScript 中，您可以：
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
See the vuetify webpack templatefor reference.
Another solution is to use:
另一种解决方案是使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app" is="App"></div>
<script src="/app.js"></script>
</body>
</html>
With:
和：
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})
回答by gotocartik
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }
回答by A. Hall
You could move any rendering to a simple wrappercomponent. The VueJS initialisation e.g. new Vue(....)shouldn't contain any HTML apart from that single wrapper component.
您可以将任何渲染移动到一个简单的包装器组件。VueJS 初始化，例如new Vue(....)不应该包含除了单个包装器组件之外的任何 HTML。
Depending on setup you could even have <app>Loading...</app>where appis the wrapper component with any loading HTML or text in between which is then replaced on load.
根据设置，您甚至可以<app>Loading...</app>将应用程序作为包装器组件，其中任何加载的 HTML 或文本都在其间，然后在加载时替换。
回答by dakshinasd
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.
用于<v-cloak>在将数据绑定到相关位置之前隐藏您的 Vue 代码。它实际上位于 Vue 文档的某个地方，除非您搜索或仔细阅读，否则任何人都可能会错过它。
回答by fitorec
Yep, you can use v-cloak, I like use spinkit, is a great library with only CSS, check a simple example:
是的，你可以使用v-cloak，我喜欢使用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/
回答by Giorgio Tempesta
I prefer using v-ifwith a computed property that checks if my data is ready, like this:
我更喜欢使用v-if计算属性来检查我的数据是否准备好，如下所示：
<template>
<div v-if="shouldDisplay">
{{ variableName }}
</div>
<div v-else>
Here you can insert a loader
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
variableName: null,
};
},
computed() {
shouldDisplay() {
return this.variableName !== null;
}
},
mounted() {
this.variableName = 'yes';
},
};
</script>
In this way it's easier to show a loader only if the data is not ready (using v-else).
通过这种方式，仅当数据未准备好（使用v-else）时才更容易显示加载器。
In this particular case v-if="variableName"would work as well, but there can be more complicated scenarios.
在这种特殊情况下v-if="variableName"也可以工作，但可能会有更复杂的情况。
