vue.js使用了基于html的模板语法，允许开发者声明式的将dom绑定到底层vue实例的数据。所有vue.js的模板都是合法的html标签，所以能被遵循规范的浏览器所解析。
在底层实现，vue先将模板编译成虚拟dom渲染函数，结合响应系统计算需要渲染的组件数量，减少dom操作次数。
如果熟悉虚拟dom且偏爱javascript的原始力量，也可以不用模板，自己写渲染函数(render)使用可选的JSX 语法
插值
文本
数据绑定常见的方法就是使用“Mustache”语法 (双大括号)的文本插值：
<span>{{msg}}</span>Mustache标签将会对应被代替为属性msg的值，绑定的属性发生改变，插值处的内容也会改变。
通过 v-once指令进行一次性插值，属性发生改变后页面也不会变动
<span v-once>{{msg}}</span>原始HTML
双大括号会将数据解析成对应文本，需要输出渲染后的html代码就需要使用 v-html 指令
//页面输出文本信息
<p>Using mustaches: {{ rawHtml }}</p>
//页面输出解析后的html内容
<p>Using v-html directive: <span v-html="rawHtml"></span></p>这个span的内容会被替换成对应属性值解析后的html，直接做为html会忽略掉解析属性值中的数据绑定。
不能用v-html来符合局部模板，vue不是基于字符串模板引擎。对于用户界面(UI),组件更适合做为可重用和可组合的基本单位。
==站点上任意html解析可能会非常危险，很容易导致XSS攻击，请对可信内容进行html插值，绝不要 对用户提供的内容插值==
特性
Mustache语法不能作用在HTML特性上，这种情况应使用v-bind指令：
<div v-bind:id="dynamicId"></div>在布尔特性下，他们的存在即暗示true，v-bind工作起来略有不同
<button v-bind:disabled="isButtonDisabled">Button</button>如果isButtonDisabled 值是null、undefined或false则disabled 特性甚至不会被渲染在button元素中
使用javaScript表达式
对于所有的数据绑定，vue.js都提供了完全的JavaScript表达式支持。
{{number++}}
{{ok:'yes'?'no'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list'+id"></div>这些表达式会在所属vue实例的数据作用域下作为Javascript被解析。但是每个绑定限制只能包含一个表达式，下面语句不会生效：
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}==模板表达式都被放在沙盒中执行，只能访问全局变量的白名单如Math和Data,不能在表达式中访问自己定义的全局变量==
指令
指令(Directives)是带有 ==v-== 前缀的特殊特性，指令特性的值预期是单个Javascript表达式(v-for是例外)，指令的职责是在表达式的值发生改变时将其产生连带影响，响应式的作用的dom
<p v-if="seen">现在你看到我了</p>在这里v-id指令将根据表达式seen值的真假来插入/移除p元素
参数
一个指令能接受一个参数，在指令名称之后冒号表示，v-bind可以响应式的更新html特性
<a v-bind:href="url">...</a>这里href是参数，告知v-bind指令将元素的href属性和url的值绑定
<a v-on:click="doClick">...</a>这里v-on指令用于监听dom事件
动态参数
从2.6.0开始，可以用方括号括起来的javascript表达式作为指令的参数
<a v-bind:[attributeName]="url">...</a>这里attributeName作为动态参数被传入，若vue实例中data属性的attributeName的值为href,那么绑定将等价于v-bind:href。
同一样的可以使用动态参数作为一个动态事件的事件名绑定处理函数：<a v-on:[eventName]="doEvent">...</a>当eventName值为focus的时候，v-on:[eventName]等价于v-ob:focus
对动态参数的约束
动态参数预期会求出一个字符串，异常情况时值为null，这个特殊null可以被显形的用于移除绑定，任何其他非字符串类型的值都会触发一个警告。
对动态参数表达式的约束
因为某些字符，例如空格和引号，放在html特性里是微笑的，在DOM中使用模板时需要回避大写键名。
例如下面方法是无效的
<!-- 这会触发一条编译警告 -->
<a v-bind:['foo' + bar]="value">...</a>使用没有空格或引号的表达式，或用计算属性代替复杂的表达式
在DOM中使用模板(直接在HTML里写模板)，需要留意浏览器是否会把特性名全部替换成小写：
<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
<a v-bind:[someAttr]="value"> ... </a>修饰符
修饰符(modifier)是以半角句号指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault():
<form v-on:submit.prevent="onSubmit">...</form>缩写
==v-== 前缀作为视觉提示，用来识别模板中vue特定的特性，当使用vue.js为现有标签添加动态行为(dynamic behavio)时，==v-== 前缀很有帮助，对于频繁使用的指令来说相对比较繁琐。
在构建由vue管理所有模板的单页页面应用程序(SPA - single page application)时，==v-== 前缀就不是很重要，因此Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>v-on缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>
