Vue.js 官方文档摘记:模板语法
模板语法
Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应式系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
插值
文本
前面的介绍中见过：
<!--直接使用双花括号，其中的anyName都会被模板进行替换--> <div id='example1'>{{anyName}}</div>var example1=new Vue({
el:"#example1",
data:{
anyName:'这里是替换anyName的内容'
}
});上面中的example1.anyName会与div中的文本进行绑定，如果不想绑定，只想渲染一次，可以使用v-once指令。
纯HTML
上面是直接使用模板替换了文本，但是如果想让模板支持使用HTML进行输出，可以采用v-html命令：
<div id='example2' v-html='anyName'>{{anyName}}</div>var example2=new Vue({
el:"#example2",
data:"<span>这里就是上面{{anyName}}被替换后的内容</span>"
});属性
前面的介绍中也展示过一个例子，这里再贴一下：
<div v-bind:id='example3'></div>var example3=new Vue({
el:"div",
data:{example3:'example3'}
});其中也可以设置bool值：
<div v-bind:disabled='example4'></div>var example4=new Vue({
el:"div",
data:{example4:true}
});使用javaScript表达式
上面的文本插入中，我们是直接输出文本，其实Vue支持简单的javaScript表达式，如以下形式：
{{number+1}}
{{ok?'Yes':'No'}}
{{message.split('').join('')}}
<div id="'Prev'+anyName"></div>上面那些简单的表达式都是可行的，但是下面这些就不行了：
{{var a=1}}
{{ if(true) {return true;} }}模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如
Math和Date。你不应该在模板表达式中试图访问用户定义的全局变量。
指令
指令(Directives)是带有
v-前缀的特殊属性。指令属性的值预期是单一javascript表达式。指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。
<p v-if:exists>根据exists的值来选择是否将该元素插入文档中</p>
参数
如果要往指令中加入参数的话，可以在指令后面加上:，表示接下来传入的是该指令的参数。
<a v-bind:href='anyName'></a>这里的href就是参数，告知将anyName表达式与a href参数进行绑定。
或者是下面的例子：
<a v-on:click='functionName'></a>修饰符
修饰符(Modifiers)是以半角句号：
.指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件使用event.preventDefault()。
这里只是做一个介绍，每个命令的修饰符后面讲到具体命令时再说。
过滤器
{{Parameter|FunctionName}}new Vue({
filters:{
FunctionName:funciton(anyName){
//这里的名字不需要跟上面的参数名：Parameter一样，value默认是Parameter
}
}
});可以串联多个过滤器：
{{Parameter|FunctionName1|FunctionName2|FunctionName3}}当要想过滤器函数中加入多个参数时，可以使用下面的形式：
{{Parameter|Function(SecondParameter,ThirdParameter)}}上面例子中的Parameter还是会默认作为第一个参数传递进Funciton中，而剩下的额外添加的参数则是第二、第三个参数。
不止可以针对文本输出使用过滤器，也可以针对v-bind使用过滤器。
<div v-bind:id="Parameter|FunctionName"></div>缩写
v-bind 缩写 :
<!--完全形式-->
<a v-bind:href='anyName'></a>
<!--缩写形式-->
<a :href='anyName'></a>v-on 缩写 @
<!--完全形式-->
<a v-on:click='FunctionName'></a>
<!--缩写形式-->
<a @click='FunctionName'></a>