在Vue里 有好几种数据渲染的方法及相关指令 下面将一一介绍：
一、插值表达式
插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义：
通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
</body>
</html>
由于插值表达式的语法是{{}} 因而也被称为mustache胡子表达式
二、v-clock
插值表达式存在闪烁的问题
在网速卡的情况下 加载插值表达式时 页面会显示{{xxx}} 当页面加载好了才会显示内容 影响美观
此时 可添加v-cloak属性 以解决插值表达式{{}}闪烁的问题
<div id="app">
<!-- 解决插值表达式闪烁的问题 -->
<p v-cloak>{{msg}}</p>
</div>
然后给v-clock添加一个css样式即可：
<style>
[v-cloak]
{
display: none;
}
</style>
这样 在网速卡的情况下 插值表达式不会被显示出来 会被display:none隐藏 等页面加载完了直接显示内容
三、v-text
v-text的效果和{{}}插值表达式差不多 都是显示数据
<div id="app">
<h4 v-text="msg"></h4>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
v-text和插值表达式的区别是：
v-text不会有闪烁问题
因为并没有在里面写表达式 而是加在属性里
但插值表达式也有其优点：
插值表达式可以在前后加上任意内容：
例如：
<p v-cloak>---{{msg}}---</p>
因为插值表达式只会替换自己的占位符 不会影响其它内容
而v-text会覆盖元素中原本的内容
四、v-html
若要渲染HTML标签 v-text是不行的 因为v-text并不会转义Html标签
这会导致Html标签被原原本本的显示到页面上
此时 需要用到v-html：
类似于Thymeleaf的th:utext属性 会对Html标签进行转义
<!-- v-html可以转义html标签 -->
<div v-html="msg"></div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
