模版语法
Vue.js使用了基于HTML的模版语法，允许开发者生命式地将DOM绑定至底层Vue实例的数据。所有Vue.js模版都是合法的HTML， 所以能被遵循规范浏览器和HTML解析器解析。
在底层的实现上，Vue将模版编译成虚拟DOM渲染函数。结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
如果你熟悉虚拟DOM并且偏爱JavaScirpt的原始力量，你也可以不用模版，直接写渲染(render)函数，使用可选的JSX
插值
文本
数据绑定最常见的形式就是使用"Mustache"语法的文本插值:
<span>Message: {{ msg }}</span>
Mustache标签将会被替代为对应数据对象上msg属性的的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。 通过使用v-once指令，也能执行一次性地插值。当数据改变时，插值处的内容不会更新。但留心这会影响到该节点上所有的数据绑定：
<span v-once>This will never change: {{ msg }}</span>
纯HTML
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你需要使用v-html指令: <div v-html="rawHtml"></div>
被插入的内容都会被当作HTML —— 数据绑定会被忽略。注意，你不能使用v-html来复合局部模版，因为Vue不是基于字符串的模版引擎。 组件更适合担任UI重用与复合的基本单元。
你的站点上动态渲染的任意HTML可能会非常危险，因为它很容易导致XSS攻击。请只对可信内容使用HTML插值。绝不要对用户提供的内容插值。
属性
Mustache不能在HTML属性中使用，应使用v-bind指令：
<div v-bind:id="dynamicId"></div>
这对布尔值的属性也有效 —— 如果条件被求值为false的话该属性会被移除：
<button v-bind:disabled="someDynamicCondition">Button</button>
使用JavaScript表达式 迄今为止，在我们的模版中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>
这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子不会生效
这是语句，不是表达式 {{ var a = 1 }}
控制流也不会生效，请使用三元表达式 {{ if (ok) { retrun message } }}
模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date. 你不应该在模板表达式中试图访问用户定义的全局变量。
过滤器
Vue.js允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在mustache插值的尾部，由“管道符”指示：
{{ message | capitalize }}
Vue 2.x中，过滤器只能在mustache绑定中使用。 为了在指令绑定中实现同样的行为，你应该使用计算属性。
过滤器函数总接受表达式的值作为第一个参数
new Vue({ filters: { capitalize: function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })
过滤器可以串联：
{{ message | filterA | filterB }}
过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA('arg1', arg2 )}}
这里，字符串'arg1'将传给过滤器作为第二个参数，arg2表达式的值将被求值然后传给过滤器作为第三个参数。
指令
指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单一JavaScript表达式(除了v-for)。 指令的职责就是当表达式的值改变时相应地将某些行为应用到DOM上。让我们回顾一下在介绍里的例子：
<p v-if="seen">Now you see me.</p>
这里，v-if指令将根据表达式seen的值的真假来移除/插入 <p>
参数
一些指令能接受一个"参数"，在指令后以冒号指明。例如，v-bind指令被用来响应地更新HTML属性:
<a v-bind:href="url"></a>
在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。另一个例子是v-on指令，它用于监听DOM事件：
<a v-on:click="doSomething"></a>
在这里参数是监听的事件名。
修饰符
修饰符(Modifiers)是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。 例如， .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
缩写
v- 前缀在模版中是作为一个标示Vue特殊属性的明显标识。当你使用Vue.js为现有的标记添加动态行为时，它会很有用，但对于一些经常使用的指令来说有点繁琐。同时，当搭建Vue.js管理所有模版的SPA时， v- 前缀也变得没那么重要了。因此，Vue.js为两个最为常用的指令提供了特别的缩写：
v-bind缩写
<!-- 完整语法 --> <a v-bind:href="url"></a>
<!-- 缩写 --> <a :href="url"></a>
v-on缩写
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
它们看起来可能与普通的HTML略有不同，但 : 与 @ 对于属性名字来说都是合法字符，在所有支持Vue.js的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。