Vue中的数据渲染都有那些！

• {{}}
  vue可以直接直接使用双大括号来进行渲染数据

 <div id="app">{{ message }}</div>

var vm = new Vue({
  el: '#app',
  data:{
        message:"我很帅"
    }
})

• v-html
  v-html是可以解读html标签渲染

 <div id="app" v-html='message'>
    <input type="text"/>
    <div >{{ message }}</div>
 </div>

**你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。

var vm = new Vue({
  el: '#app',
  data:{
        message:"<div style='background:red;width:50px;height:50px'></div>"
    }
})

• v-text
  v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算。

<div id="app">{{ message }}</div>

var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})

• v-once
  vue中有个指令叫做 v-once 可以通过v-once与v-text结合，实现仅执行一次性的插值

    <span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span>

var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})