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>