Vue 核心 50 讲 | 第五回：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 官方教程对模板语法的解释了。来吧，咱们再来看看：