在加载页面时如何隐藏 VueJS 语法？

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

因此，当我在浏览器上运行我的 vuejs 应用程序时，要启用节流下载速度(设置为低连接)。浏览器里有未完成的 vue 语法输出。

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

68165 次浏览

小开

最佳答案

CSS:

[v-cloak] { display: none; }

我附上了下面的代码。你可以看到有和没有 v-cloak的区别。

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

译自: 美国《 codepen.io/gurghet/pen/pnlqwy 》杂志网站(tp://

)

小开

Http://codepen.io/gurghet/pen/pnlqwy

包装器组件，其中包含任何加载 HTML 或文本，然后在加载时替换这些 HTML 或文本。

小开

< a: href = ‘ url’> \{\{ url }}

不要在 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>

< p >

在你的主 JavaScript 中，你可以:

import Vue from 'vue'
import App from './App'


new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

连结: Http://tobiasahlin.com/spinkit/

小开

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

在你的 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%;
}

当然，您需要提供一个有效的和可访问的路径来加载程序映像。

请参阅 Vuetify 网络包模板作为参考。

希望能有帮助。

小开

在将数据绑定到相关位置之前，使用 <v-cloak>隐藏 Vue 代码。它实际上位于 Vue 文档中的一个位置，除非您进行搜索或彻底阅读，否则任何人都可能会错过它。

小开

另一种解决方案是:

<!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>

配合:

import Vue from 'vue'
import App from './App'
Vue.component("App", App);


const app = new Vue({});


window.addEventListener("load", async () => {
app.$mount("#app")
})

是的，你可以使用 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>

连结: K: Http://tobiasahlin.com/spinkit/

小开

您可以看到这个链接使用 v-cloak在加载期间隐藏元素为更好的低调。

我更喜欢使用带有计算属性的 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>

通过这种方式，只有在数据没有准备好的情况下(使用 v-else)才更容易显示加载程序。

在这种特殊情况下，v-if="variableName"也可以工作，但是可能会有更复杂的场景。

小开

**html**
<div v-cloak>\{\{ message }}</div>


**css**
[v-cloak] { display: none; }

小开

不要在 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>

在你的主 JavaScript 中，你可以:

import Vue from 'vue'
import App from './App'


new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

把所有东西都放在 <template>里对我来说效果很好。

请参阅 Vuetify 网络包模板作为参考。

在 Vue 呈现之前，内容是隐藏的。

<!-- index.html -->
<div id="app">
<template>
<span class="name">\{\{ name.first }} \{\{ name.last }}</span>
</template>
</div>

/* index.js */
new Vue({
el: '#app',
data: {
name: { first: 'David', last: 'Davidovich'}
}
});

另一种解决方案是:

<!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>

配合:

import Vue from 'vue'
import App from './App'
Vue.component("App", App);


const app = new Vue({});


window.addEventListener("load", async () => {
app.$mount("#app")
})

小开

组件: { App } ,

对于那些在有多个 Laravel Blade 文件的视图中使用 v 斗篷而且它不起作用的人，尝试在父 Blade 文件中而不是在任何子 Blade 文件中使用 v 斗篷。

小开

我更喜欢使用带有计算属性的 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>

通过这种方式，只有在数据没有准备好的情况下(使用 v-else)才更容易显示加载程序。

范本:

在这种特殊情况下，v-if="variableName"也可以工作，但是可能会有更复杂的场景。

小开

请参阅 Vuetify 网络包模板作为参考。

另一种解决方案是:

<!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>

配合:

import Vue from 'vue'
import App from './App'
Vue.component("App", App);


const app = new Vue({});


window.addEventListener("load", async () => {
app.$mount("#app")
})