您可以使用v-cloak指令,如果将其与正确的CSS结合使用,它将隐藏Vue实例,直到编译完成。
HTML:
<div v-cloak>{{ message }}</div>
CSS:
[v-cloak] { display: none; }
我附上了以下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
正如其他人建议的那样,使用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%;
}
当然,您需要提供一个有效且可访问的加载程序映像路径。它将呈现出类似的效果。
希望能帮助到你。
使用v-cloak
指令,您可以隐藏未编译的胡子绑定,直到完成vue实例编译为止。您必须使用CSS块将其隐藏,直到编译为止。
HTML:
<div v-cloak>
{{ vueVariable }}
</div>
CSS:
[v-cloak] {
display: none;
}
<div>
在编译完成之前,此功能将不可见。
您可以看到此链接,以便在加载期间隐藏元素,v-cloak
以更好地降低性能。
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")
})
您可以将任何渲染移至简单的包装器 组件。VueJS初始化,例如新的Vue(....),除了那个单个包装器组件之外,不应包含任何HTML。
根据设置,您甚至可以<app>Loading...</app>
在哪里app是包装器组件,其中任何正在加载的HTML或文本都将在加载时被替换。
用于<v-cloak>
在将数据绑定到相关位置之前隐藏您的Vue代码。它实际上位于Vue文档上的某个地方,除非您进行搜索或仔细阅读,否则任何人都可能会错过它。
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }
是的,您可以使用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>
链接:-http : //tobiasahlin.com/spinkit/
我更喜欢使用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"
也可以,但是可能会有更复杂的情况。
对于那些在具有多个Laravel Blade文件的视图中使用v-cloak且无法正常工作的用户,请尝试在父刀片文件而不是任何子刀片文件中使用v-cloak。
文章标签:javascript , vue.js
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!