v-text：以純文本方式顯示數據；
v-html：可以識別HTML標簽；
v-once：只渲染元素或組件一次；
v-pre：不進行編譯，直接顯示內容；
v-cloak：可以隱藏未編譯的 Mustache 標簽直到實例准備完畢，也就是隱藏{{}}；
v-text與v-html的示例：
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:'#two',
data:{
msg:"歡迎來到perfect*博客園！！！"
}
})
}
</script>
<body>
<div id="two">
<input type="text" v-model="msg" />
<h2>{{msg}}</h2>
<h2 v-text="msg"></h2>
<h2 v-html="msg"></h2>
</div>
</body>
由效果圖可以看出v-html可以識別HTML標簽，進行了換行
v-once與v-pre指令：
代碼只修改了HTML部分，代碼：
<body>
<div id="two">
<input type="text" v-model="msg" />
<h2 v-pre>{{msg}}</h2>
<h2 v-text="msg"></h2>
<h2 v-html="msg" v-once></h2>
</div>
</body>
由效果圖可知，v-once可控制不受input組件的影響，v-pre直接顯示其內容
v-cloak指令
注意：需要進行寫css樣式，不然v-cloak指令無作用；
初始效果：
頁面上有{{msg}}顯示，而我們不想讓它顯示出來，因此需要使用v-cloak指令，並且寫其樣式：
最終效果如下：
vue:
<script> window.onload= () =>{new Vue({ el:'#two', data:{ msg:"歡迎來到perfect*博客園！！！" }, created:function(){ alert('生命周期函數!!'); } }) } </script>
css:
<style> [v-cloak]{ display: none; } </style>
html:
<div id="two">
<input type="text" v-model="msg" />
<!--<h2 v-pre>{{msg}}</h2>-->
<h2 v-cloak>{{msg}}</h2>
<h2 v-text="msg"></h2>
<h2 v-html="msg" v-once></h2>
</div>
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-model</title> 6 </head> 7 <script type="text/javascript" src="../js/vue.js" ></script> 8 <script> 9 window.onload= () =>{new Vue({ 10 el:'#two', 11 data:{ 12 msg:"歡迎來到perfect*博客園！！！" 13 14 15 }, 16 created:function(){ 17 alert('生命周期函數!!'); 18 } 19 20 21 22 23 }) 24 } 25 </script> 26 <style> 27 [v-cloak]{ 28 display: none; 29 } 30 </style> 31 <body> 32 <div id="two"> 33 <input type="text" v-model="msg" /> 34 <!--<h2 v-pre>{{msg}}</h2>--> 35 <h2 v-cloak>{{msg}}</h2> 36 <h2 v-text="msg"></h2> 37 <h2 v-html="msg" v-once></h2> 38 39 </div> 40 </body> 41 </html>