書接上文，上一回我們們說到了 Vue 官方贈送給我們們的程式碼審查和除錯工具 Vue Devtools，有了這個裝備的加成，我們們學習 Vue 的底氣也足了一些。接下來，就讓我們們真正地來領略 Vue 在前端開發中的魅力吧。
那麼，首先不能不說的就是 Vue 的初階黑魔法 —— 模板語法了。你可能有問，為啥？額O__O "…容我想想的。好吧~ 其實，是因為 Vue 官方教程第一個講的也是模板語法。哎！總是逼奴家說心裡話，你這樣真的好壞哦~~
好吧~ 既然說到這兒了，我們就先看看 Vue 官方教程是怎麼來介紹模板語法的吧！
Vue.js 使用了基於 HTML 的模板語法，允許開發者宣告式地將 DOM 繫結至底層 Vue 例項的資料。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。 在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函式。結合響應系統，Vue 能夠智慧地計算出最少需要重新渲染多少元件，並把 DOM 操作次數減到最少。
我就呵呵了，看懂了嗎？看懂了嗎？看懂了嗎？反正我看完又是一臉懵逼！為什麼要說“又”呢？！曾經是誰告訴我中文文件已經很友好了，就這友好嗎？此時的我，心裡問候告訴我的人祖宗十九代！
褲襠裡著火，當然了！我也不是在吐槽 Vue 官方編寫教程的人，畢竟人家是官方文件，總是要專(bu)業(shuo)和(ren)嚴(hua)謹(bei)一些的。
好吧！啥也不說了，先給你看一段程式碼吧。
<div id="app">
<input v-model="message">
<h2>{{ message }}</h2>
<ol>
<li v-for="todo in todos">
{{ todo }}
</li>
</ol>
</div>
<script src="scripts/vue.js"></script>
<script>
// 建立Vue的例項物件
var app = new Vue({
el: '#app',
data: {
// 儲存在Vue的例項物件中
message: '前端課湛',
todos: ['JavaScript學習', 'HTML學習', 'CSS學習']
}
});
</script>
複製程式碼上面這段程式碼你是可以CV直接執行的，執行的結果是這樣示兒的。
看完還是一臉懵逼？客官別急，且聽我慢慢道來。我們們來看這段示例程式碼的這部分：
<div id="app">
<input v-model="message">
<h2>{{ message }}</h2>
<ol>
<li v-for="todo in todos">
{{ todo }}
</li>
</ol>
</div>
複製程式碼這裡邊的 input 標籤裡面的 v-model、h2 標籤中的文字部分 {{ message }} ，還有 li 標籤裡面的 v-for="todo in todos" 等等，都可以稱之為模板語法。
這些模板語法通過 Vue 框架就可以繫結到對應 Vue 例項的資料內容，也就是下面這段示例程式碼：
// 建立Vue的例項物件
var app = new Vue({
el: '#app',
data: {
// 儲存在Vue的例項物件中
message: '前端課湛',
todos: ['JavaScript學習', 'HTML學習', 'CSS學習']
}
});
複製程式碼至於通過 Vue 框架是怎麼把模板語法繫結到 Vue 例項的資料上的，你關心那個幹嘛？！額... ...也不說不要關心，只是現在這個時候，我們們還是把精力先放到怎麼更好地理解這些操蛋的概念和怎麼更容易地上手使用上吧！
說到這兒，估計你有點明白 Vue 官方教程對模板語法的解釋了。來吧，我們們再來看看：
Vue.js 使用了基於 HTML 的模板語法，允許開發者宣告式地將 DOM 繫結至底層 Vue 例項的資料。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。
這句話，不過就是要告訴你 Vue 的模板語法是符合 HTML 約定的。你看不是用了 HTML 標籤的自定義屬性，就是在文字內容上用了特殊格式而已，肯定是符合 HTML 的約定了。所以說 Vue 的模板都是合法的 HTML，並且能被瀏覽器和 HTML 解析器解析。
至於下面這段話：
在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函式。結合響應系統，Vue 能夠智慧地計算出最少需要重新渲染多少元件，並把 DOM 操作次數減到最少。
不過就是告訴你 Vue 很優秀，可以智慧地計算出最少需要重新渲染多少元件，並把 DOM 操作次數減到最少。啥意思？就是在說 Vue 的效能好唄！
嘿嘿~ 沒想到就一個概念就能寫一個章回吧？我可不是為了湊篇幅啊！真不是！！！