概述
我们在学习vue的过程中，对指令的学习是必不可少的，下面结合自己工作和学习的一点经验介绍下vue中插值表达式，v-text和v-html三者的区别
插值表达式
我们知道页面的加载是自上而下的，js加载是同步的。当页面刷新比较频繁或者网速较慢的时候，我们使用插值表达式页面会先出现‘{
{message}}’，再用真实数据替换‘{
{message}}’(模拟这种现象可以将vue.js的引入放在body的后面，或者调整网络请求的速度为3G)
<!--这是我们的View-->
<div id="app">
<p>{
{message}}</p>
</div>
new Vue({
el: '#app',
data: {
message:"hello world!",
}
})
解决上述问题的办法v-cloak,这个指令可以隐藏未编译的标签直到实例准备完毕。不会显示，直到编译结束。
<div id="app">
<p v-cloak>{
{message}}</p>
</div>
<style>
[v-cloak]{
display: none;
}
</style>
此时我们去访问页面时候不再会出现‘{ {message}}’，当Vue数据传递完成时，会正确显示数据。
v-text
<div id="app">
<p v-cloak>{
{message}}</p>
<p v-text="message"></p>
</div>
显示效果与插值表达式一样，并且还不会出现‘{ {message}}’闪烁现象，那么就有同学就要问有了v-text为什么还要插值表达式？通过下面代码为大家讲述两者区别：
<div id="app">
<p v-cloak>你好世界：{
{message}}</p>
<p v-text="message">你好世界：</p>
</div>
运行结果：
结论：插值表达式相当于一个占位符，只会替换掉其中的占位置的内容，v-text只能显示Vue对象传递过来的数据，会替换掉节点里已有的内容。
v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak]{
display: none;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<!--这是我们的View-->
<div id="app">
<p v-cloak>{
{message}}</p>
<p v-text="message"></p>
<p v-html="message"></p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:"<h1>Hello World!</h1>",
}
})
</script>
</html>
运行结果：
结论：插值表达式和v-text不能够解析html标签，v-html能够解析html标签
总结
- 如果只是单独展示Vue对象里的数据，建议使用“v-text”指令。
- 如果要同时展示用户前台数据，那么就需要用插值表达式，但是不要忘记和“v-cloak”属性一起使用（同时需要设置样式[v-cloak]{display:none;}）。
- 如果Vue对象传递过来的数据含有HTML标签，则使用v-html