Vue 的初階黑魔法 —— 模板語法

上一回：Vue 官方贈送的橙色裝備

書接上文，上一回我們說到了 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 的性能好唄！

嘿嘿~ 沒想到就一個概念就能寫一個章回吧？我可不是爲了湊篇幅啊！真不是！！！

下一回：Vue 模板語法第一式 —— 插值