模板语法

Vue 使用基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定到底层实例的数据。所有 Vue 模板都是合法的 HTML，能被遵循规范的浏览器和 HTML 解析器解析。

底层原理

在底层，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应式系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，也可以不用模板，直接写渲染函数（render function），使用可选的 JSX 语法。

// 模板写法
<template>
  <div>{{ message }}</div>
</template>

// 渲染函数写法
render: function(createElement) {
  return createElement('div', this.message)
}

大多数情况下，模板更加直观和易读。渲染函数适合需要完全编程能力的复杂场景。

本章将详细介绍 Vue 模板语法的各个方面：

掌握模板语法是使用 Vue 的基础，让我们开始学习。