Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。
（1）插值
①双向绑定：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<p class="insert"> {{message}} <button v-on:click="change">改变</button> </p> var insert = new Vue({ el:".insert", data:{ message:"信息" }, methods:{ change:function(){ this.message = "改动信息"; } } })
Mustache 标签将会被替代为对应数据对象上 message属性的值。无论何时，绑定的数据对象上 message属性发生了改变，插值处的内容都会更新。
②一次性冻结性绑定
通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<p class="insert" v-once>
{{message}}
<button v-on:click="change">改变</button>
</p>
③原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，可以使用 v-html 指令：
<!-- 原始HTML -->
<div class="old">
<p>{{info}}</p>
<p v-html="info"></p>
</div>
// 原始HTML
var old = new Vue({
el:".old",
data:{
infoHtml:"<span style='color:red;'>红色字体</span>"
}
})
效果：
这个 span 的内容将会被替换成为属性值 infoHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。注意：不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。
④特性/属性
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
<div v-bind:id="infoId"></div>
在布尔特性的情况下，它们的存在即暗示为 true，v-bind 工作起来略有不同，在这个例子中：
<button v-bind:disabled="status">按钮</button>
如果 status的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。下面吧status设置为null，此时去审查代码
var old = new Vue({ el:".old", data:{ info:"<span style='color:red;'>红色字体</span>", old_id:"old_id", status:null } })
此时会发现disabled属性未包含在button元素里。
⑤使用js表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
反转：{{ message.split('').reverse().join('') }}
年纪：{{age+1}}
（2）指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾之前的例子：
<p class="seenArea" v-if="seen">现在你看到我了</p>
var seenArea = new Vue({
el:".seenArea",
data:{
seen:true
}
})
v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素
①绑定属性/特性
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：
<a v-bind:href="url">百度链接</a> var seenArea = new Vue({ el:".seenArea", data:{ seen:true, url:"http://www.baidu.com" } })
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
②绑定监听事件
v-on 指令用于监听 DOM 事件：
<a href="javascript:;" v-on:click="prompt">弹框</a>
methods:{
prompt:function(){
alert("弹框")
}
}
③动态参数（兼容问题，测试失败）
1、动态绑定属性/特性
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数
<a v-bind:[attributeName]="url">链接</a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
2、动态绑定处理函数
同样地，也可以使用动态参数为一个动态的事件名绑定处理函数
<a v-on:[eventName]="doSomething">事件链接</a>
同样地，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
④修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
在div app中添加一个form 为form绑定一个提交事件
<form v-on:submit="onSubmit"> <input type="text"><br /> <input type="submit" value="提交"> </form>
在method中添加onSubmit
onSubmit:function() {
console.log("submitted");
}
绑定完发现在运行时无法在console中打印出submitted 原因是每次提交页面都会刷新
避免刷新的方法有两种：第一种onSubmit传递参数$event
<form v-on:submit="onSubmit($event)"> onSubmit:function(e) { e.preventDefault(); console.log("submitted"); }
第二种方法利用vue的模板语法--->指令--->修饰符
<form id="ti_jiao" v-on:submit.prevent="onSubmit"> <input type="text"><br /> <input type="submit" value="提交"> </form> var ti_jiao = new Vue({ el:"#ti_jiao", methods:{ onSubmit:function(){ console.log("submited"); } } })
（3）缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
1、v-bind()缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>
2、v-on()缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>
它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。
.
