Vue使用了基於HTML的模板語法，允許開發者聲明式地將DOM綁定至底層Vue實例的數據。所有Vue的模板都是合法的HTML，所以能被遵循規范的瀏覽器和HTML解析器解析。
在前面，我們一直使用的是{{}}的形式渲染文本，但是除此方法之外，vue還提供了其他幾種常見的文本渲染方式：
- v-text：更新元素的innerText
- v-html：更新元素的innerHTML
- v-once：靜態插值
- v-pre：原格式輸出
- v-cloak：指令保持在元素上直到關聯實例結束編譯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <style> [v-cloak]{ display: none; } </style> <script src="./vue.js"></script> </head> <body> <!--模板--> <div id="demo" > <div >{{message}}</div> <div v-text="message1"></div> <div v-html="message2"></div> <div v-once="message3"></div> <div v-pre>{{message4}}</div> <div v-cloak>{{message5}}</div> </div> <script> var demo = new Vue({ el: '#demo', data: { message:'文本渲染', message1:'this is <i>v-text</i>', message2:'this is <i>v-html</i>', message3:'this is <i>v-once</i>', message4:"文本渲染", message5:"文本渲染" }, }) </script> </body> </html>
在Vue中，我們可以使用{{}}將數據插入到相應的模板中，這種方法是一種文本插值。使用這種方法，如果網絡慢或者JavaScript出錯的話，會將{{}}直接渲染到頁面中。值得慶幸的是，Vue還提供了v-text和v-html來渲染文本或元素。其中v-text和{{}}類似，只是用來渲染文本內容，而v-html和innerHTML非常相類，可以將HTML元素渲染；而v-once這個我們在前面的v-on的時候提到過，只能執行一次，所以當數據改變時，插值處的內容不會更新，所以稱為靜態插值；至於v-cloak之歌指令，經常和css規則一起使用，可以用來隱藏為編譯的插值直到實例編譯結束，在上面的例子中，若不設置v-cloak樣式為隱藏，則會在結束編譯之前，一直顯示為{{message5}}；最后就是v-pre了，這個指令可以在模板中跳過vue的編譯，直接輸出原始值，也就是不會再輸出vue中的data值了，而是直接顯示{{message4}}。