一、資料繫結
Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統：
<div id="app"> {{ msg }} </div> //例項化程式碼 var app = new Vue({ el: '#app', data: { msg: '歡迎學習Vue' } })
{{ msg }} 為什麼會變成 msg 的值？vue 使用基本 html 的模板語法，允許開發者宣告式地將DOM 繫結至底層 vue 例項的資料，所有 vue 模板都是合法的 html，所以能被遵循規範的瀏覽器和 html 解析器解析。
二、模板語法
2.1、mustache語法
mustache 翻譯為中文，是鬍子/鬍鬚。由於 {{ msg }} 兩邊都有對稱的大括號，就像人的鬍鬚一樣，所以就叫做 mustache 語法。
特點：不僅可以直接寫成變數，也可以新增簡單的表示式。
//寫法多樣，使用便捷 <h2> {{ msg }} <h2> <h2> {{ fir+' '+sed }} <h2> <h2> {{ fir }} {{sed}} <h2> <h2> {{ number + 1 }} <h2> <h2> {{ message.split('').reverse().join('') }} <h2>
2.2、v-once
上邊的資料繫結中，頁面展示 msg 的值，如果我們在瀏覽器除錯中，修改 msg 的值，頁面立馬會更新，始終保持最新的值為頁面內容。
除錯模式，輸入如下內容觀察：
app.msg="你不愛我了" //回車
vue 支援動態渲染文字，在修改屬性的同時，實時渲染文字。為了提高渲染效率，只需第一次渲染出文字之後，後期屬性再修改不會影響文字內容。
此時就需要使用 v-once 解決問題。
//使用語法 <span v-once>{{msg}}</span>
特點：該指令後面不需要任何表示式，表示元素或元件只渲染一次，不會隨資料的改變而改變文字。
2.3、v-html
在某些特殊情況下，頁面需要動態地插入一段 html 程式碼，比如編輯器，動態傳入的就是一段html 程式碼，使用時我們需要原樣輸出，如：
<div>{{url}}</div>
data(){
return{
url:'<a href="http://www.baidu.com">百度首頁</a>'
}
}
直接這麼寫並不能滿足我們的要求，我們需要展示成帶有超連結的百度首頁，此時 v-html 登場。
// v-html 使用語法 <div v-html="url"></div>
給元素新增 v-html 指令後，元素就展示成一個帶有超連結的百度首頁文字。
v-html 特點：可以解析欄位內的標籤，把內容當作 html 標籤來處理。
2.4、v-text
// 使用語法 <span v-text="msg"></span>
特點：與 mustache 語法類似，用於展示文字的。使用沒有 mustache 靈活，所以使用較少。
注意點：<span v-text="msg">新內容</text> 標籤中又新增內容時，會把原來 msg 中的內容覆蓋掉。
2.5、v-pre
v-pre 與 html 中的 pre 標籤有些類似，html 中的 pre 會原樣輸入空格、換行、縮排和文字內容。v-pre 也是原樣輸出內容，不會解析。
// 使用語法 <div v-pre> {{ msg }} </div> 頁面直接輸出 {{ msg }}
2.6、v-cloak
cloak 翻譯成中文，是斗篷。那麼 v-cloak是用來幹什麼的呢？
html頁面執行的時候，會閃現 {{ msg }} ，如圖：
v-locak 就是用來解決這個問題的。
// 使用語法 <div v-cloak> {{ msg }} </div>
特點：在 vue 解析之前，元素有 v-cloak 屬性，vue 解析之後，元素沒有 v-cloak 屬性。
利用 v-cloak 的特點，我們在 css 中新增
[v-cloak]{ display:'none' }
此時再執行網頁的時候，解析之前會被隱藏掉，解析之後才展示內容，就不會再閃現 {{msg}}。