提出问题
在 vue教程-第一个程序 中,频繁刷新浏览器,会看到网页先显示 {{xxx}} 表达式,然后再替换成具体的值(电脑或浏览器运行卡顿时,会看到)
可通过谷歌浏览器设置断点验证这一效果:
在vue编译结束前,显示表达式,编译结束后,显示真正的值,这就产生了 闪烁(闪动)
这种用户体验非常不好
解决问题
使用 v-cloak 指令
官网:
https://cn.vuejs.org/v2/api/#v-cloak
样式
添加隐藏样式
<style>
[v-cloak] {
display: none;
}
</style>
html
在表达式所在的标签中添加 v-cloak 指令
<div id="app" v-cloak>
<div>{{msg}}</div>
<div>{{1+2+3}}</div>
<div>姓名:{{name}},年龄:{{age}}</div>
</div>
js
不需要做改动
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue!',
name: '李雷',
age: 20
}
})
</script>
效果
可通过断点观察效果:
先通过样式隐藏,vue编译结束后,再显示

