在Vue中，Vue模板对应的就是Vue中的View（视图）部分，也是Vue重中之一，而在Vue中要了解Vue模板我们就需要从两个方面来着手，其一是Vue的模板语法，其二就是模板渲染。Vue模板语法是Vue中常用的技术之一，除非在应用程序中不用渲染视图或者你的程序直接采用的是渲染函数（render()）。相较而言，模板语法较简单一点，但对于模板的渲染（模板编译）就会更为复杂一些，如果需要了解模板渲染就需要对Vue的渲染函数，响应式原理之类的要有所了解。当然，如果你跟我一样是初学者的话，建议你先花一点时间阅读一下下面几篇文章：

• Vue的模板
• Vue.js 定义组件模板的七种方式
• Vue的render函数
• 在Vue中如何用数据来驱动用户界面
• 从JavaScript属性描述器剖析Vue.js响应式视图
• Vue中的响应式
• 深入理解Vue.js响应式原理
• Vue的双向绑定原理及实现
• Vue双向绑定的实现原理Object.defineproperty
• Vue2.0 源码阅读：响应式原理

那咱们接下来先从Vue模板语法开始入手，应该这部分相对来说较简单一点。

Vue模板语法

先来看一段最简单的代码：

<!-- App.vue -->
<template>
    <div id="app">
        {{ message }}
    </div>
</template>

上面代码演示的仅仅Vue模板中的一种方式，也是最简单和最常见的一种模板方式。在Vue中除了上述这种方式之外还有其他几种方式，较为详细的可以阅读《Vue.js 定义组件模板的七种方式》一文。

这段代码具体的含义是什么暂不说。

在Vue中，模板语法是逻辑和视图之间的沟通桥梁，使用模板语法编写的HTML会响应Vue实例中的各种变化，简单地说，Vue实例中的逻辑可以随心所欲的渲染在页面上。正如上面的示例所示，如果我们Vue实例中逻辑让message发生变化时，那么浏览器客户端就立即发生变化。

示例是一个最简单的模板语法，但其中有一个角色是最为重要，那就是插值（Mustache）标签，常用{{}}符号来表示。Vue模板中插值常见的使用方法主要有：文本、原始HTML、属性、JavaScript表达式、指令和修饰符等。

文本

插值中最常见的就是文本插值，正如上面的示例中的{{ message }}，该标签将会被替代为对应数据对象上message属性的值。无论何时，绑定的数据对象上message属性发生变化时，插值处的内容都会更新。

但也有一个额外的场景，那就是在模板语法中看是否使用了其他的指令，比如，在模板中要是使用了v-once指令的话，那么该插值就是一次性地插值。也就是说，当数据改变时，插值处的内容不会更新。其使用如下所示：

<!-- App.vue -->
<template>
    <div id="app">
        <span v-once>{{ message }}</span>
    </div>
&