Vue基本指令
2018-10-17 本文已影响29人
一叶扁舟丶
v-cloak
v-cloak 不需要表达式,他会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和CSS的 display: none; 配合使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app" v-cloak>
{{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '这是一段文本'
}
});
</script>
</body>
</html>
这事虽然已经加了指令 v-cloak, 但其中并没有起到任何作用,当网速较慢, Vue.js 文件还没加载完时,在页面上会显示 {{ message }} 的字样,直到 Vue 创建实例,编译模板时,DOM 才会被替换,所以这个过程屏幕是有闪动的.只要加一句 CSS 就可以解决这个问题了:
[v-cloak] {
display: none;
}
