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 模板语法第一式 —— 插值