一、在vue中，渲染普通文本有2种方式：{{}}与v-text，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
</head>
<body>
<div id="app">{{msg}}</div>
<script>
new Vue({
el: '#app',
data: {
msg: '欢迎Vue!'
}
})
</script>
</body>
</html>
或将上面的
<div id="app">{{msg}}</div>改成如下也ok：
<div id="app" v-text="msg"></div>最后输出的结果为：欢迎Vue!
但是，需要注意的是，在使用{{}}展示或更新页面数据时：当网速比较慢时，会出现一个不好的过度现象，会让用户先看到我们的表达式（上面页面中的{{msg}}），然后才看到data中的值（欢迎Vue!）------->即所谓的闪烁问题！
二、解决这个问题的方法：
1、使用v-cloak指令，然后为其设置css样式display:none;即上述代码可修改为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>{{msg}}</div>
<script>
new Vue({
el: '#app',
data: {
msg: '欢迎Vue!'
}
})
</script>
</body>
</html>
说明：但有时添加完毕后变量仍会显示（即闪烁问题没解决），这是怎么回事呢？原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致，所以最好再添加一个 !important ，将其优先级设置为最高，防止被其他优先级高的dispaly:none样式所覆盖。
即：
[v-cloak]{
display: none !important;
}2、使用v-text解决
三、附加：
1、{{}}与v-text的区别
1》默认v-text是没有闪烁问题，{{}}存在闪烁的问题
2》 v-text会覆盖掉元素中原本的内容，但是{{}}只会替换自己的这个占位符。
如下示例展示可以直观的说明：
{{}}示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>￥{{msg}}元</div>
<script>
new Vue({
el: '#app',
data: {
msg: '100'
}
})
</script>
</body>
</html>
最后输出的结果为：￥100元
v-text示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
</head>
<body>
<div id="app" v-text="msg">￥元</div>
<script>
new Vue({
el: '#app',
data: {
msg: '100'
}
})
</script>
</body>
</html>
最后输出的结果为：100
2、{{}}、v-text与v-html的区别
1》前两个向页面渲染普通文本，后者向页面输出html。
2》与v-text一样，v-html也会覆盖掉元素中原本的内容。
