插值表达式闪烁问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>
在刷新页面的时候可能会看到插值表达式，如下图：
F12, 去到Network，设置为Slow3G. 可能可以看到在vue.js请求过来之后，才会从{{ msg }} 显示为123
解决方法：
（1）v-cloak
等到Vue.js请求到之后才显示组件，否则组件处于display: none;状态.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue学习</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{ msg }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>
（2）v-text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue学习</title>
</head>
<body>
<div id="app">
<p v-text="msg"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>
v-cloak与v-text的区别：
（a）默认v-text是没有闪烁问题
（b）v-text会覆盖元素中原本的内容，但是插值表达式智慧替换自己的占位符，不会把整个元素内容清空
示例：
【运行结果】
（3）v-html
若字符串带有标签，想输出为html，则需要用v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue学习</title>
</head>
<body>
<div id="app">
<p v-html="msg"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'<h1>123</h1>'
}
})
</script>
</body>
</html>
【运行结果】
