1，双大括号语法
a.双大括号输出文本内容
b.js表达式
案例源码
<body>
<div id="app">
<h3>1.{{}}双大括号输出文本内容</h3>
<p>{{msg}}</p>
<h3>2.可以使用JS表达式，进行运算</h3>
<p>{{sorce+2}}</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
sorce:1000
}
})
</script>2，v-once一次性插值
通过使用 v-once指令，只能执行一次插值，当数据再次改变时，插值处的内容不会更新。
案例源码
<body>
<div id="app">
<h3>1.{{}}双大括号输出文本内容</h3>
<p>{{msg}}</p>
<h3>2.可以使用JS表达式，进行运算</h3>
<p>{{sorce+2}}</p>
<h3>3.v-once一次性插值</h3>
<p v-once>{{msg}}</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
sorce:1000
}
})
</script>3,v-html指令输出真正的html内容
1.格式不与v-once相同，他的后面需要有等于号。如下v-html=“XXXX”
为什么要用等号这种格式呢？
因为双大括号{{ }}会将数据解释为普通文本，为了输出真正的HTML我们要用v-html=“XX”这种格式
（重要）2.还能防止XSS攻击
接下来我来详细说一下
Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息）读取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。
下面我来具体用代码演示一下
<h3>4.指令输出真正的html内容</h3>
<p>{{aaaHtml}}</p>
<p v-html=" aaaHtml"></p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
sorce:1000,
aaaHtml:'<span style="color:red">此内容的字为红色
<script>alert(123)<\/script></span>'
}
})
</script>效果图（可以看出alert窗口并未弹出）
