如何在加载页面时隐藏VueJS语法？
ant*_*tra 122 javascript vue.js
也许这是一个微不足道的问题.
所以,当我在浏览器上运行我的vuejs应用程序时,启用限制下载速度(设置为低连接).我在浏览器中输出了未完成的vue语法输出.
我知道我们可以在整个页面加载之前显示加载图像来解决这个问题,但是有没有最好的解决方案来解决这个问题？
Gus*_*Gus 205
您可以使用v-cloak指令,该指令将隐藏Vue实例,直到编译完成.
HTML:
<div v-cloak>{{ message }}</div>
CSS:
[v-cloak] { display: none; }
- 看起来像`v-cloak`应该是默认的,如果有人真的想要显示`{{}}`,他们应该使用类似`v-uncloak`的东西. (23认同)
- 只是对主`app` div应该没问题 (20认同)
- 现有 HTML 上的 `display:none` 对 SEO 来说是一个糟糕的标志。我认为在页面加载之前使用某种覆盖可能会更好。 (4认同)
- 这行得通，但老兄它笨拙。我真的希望有个更优雅的东西。+1 (2认同)
gur*_*het 38
我附上了以下codepen.您可以看到有无差异v-cloak.
<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
- @twigg这就是重点.第一个显示常规标记,第二个显示使用`v-cloak`属性的隐形标记. (11认同)
sch*_*rtz 26
正如其他人使用v-cloak所建议的那样是正确的解决方案.然而,正如@ DelightedD0D提到的那样它很笨重.简单的解决方案是在伪指示符选择器::before中添加一些CSS v-cloak.
在你的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%;
}
当然,您需要为加载程序映像提供有效且可访问的路径.它将呈现类似的东西.
希望能帮助到你.
把所有东西都放进去<template>对我来说效果很好。
内容在 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'}
}
});
小智 6
使用v-cloak指令,您可以隐藏未编译的胡须绑定,直到vue实例完成编译.您必须使用CSS块来隐藏它直到编译.
HTML:
<div v-cloak>
{{ vueVariable }}
</div>
CSS:
[v-cloak] {
display: none;
}
<div>在编译完成之前,这将不可见.
您可以在加载过程中v-cloak看到此链接隐藏元素以获得更好的低估.
小智 6
**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/>'
})
请参阅vuetify Webpack模板以获取参考。
另一种解决方案是使用：
<!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")
})
| 归档时间： |
|
| 查看次数： |
39308 次 |
| 最近记录： |