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

在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1、插入纯文本   “Mustache” 语法

{{message}}{{message}} Vue({ , 18 data:{ } 21 })

Mustache 不能在 HTML 属性中使用，应使用  v-bind 指令

<div v-bind:id="dynamicId"></div>

对boolean值同样也有作用，如果判断条件为false，该属性会被移除

<button v-bind:disabled="someDynamicCondition">Button</button>

2、使用 v-html 指令插入html,数据绑定会被忽略

Vue({ , 16 data:{ } 19 })

3、对于所有数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，每个绑定只能是单个表达式

{{message + "-----不信你试试"}}{{message.split('').reverse().join('')}}{{num + 12}}{{ok ? 'ok是true':'ok是false'}} Vue({ , 19 data:{ , , } 24 })

打印结果：

4、部分指令后面还能跟一个参数，指令背后用冒号指明

<a v-bind:href="url"></a>   //更新html属性

<a v-on:click="doSomething"> //监听事件

5、过滤器

　　过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。过滤器函数总接受表达式的值作为第一个参数。

{{message|capitalize}}{{num|test1}}{{num|test1|test2(10,20)}} Vue({ , 19 data:{ , , }, 24 filters:{ (num){ }, (num,arg1,arg2){ num 31 return arg2 32 }, (value) { value.toString() ) 37 } 38 } 39 })

打印结果：

6、指令缩写格式