vue模板语法

插值

文本：数据绑定最常见的形式就是使用‘Mustache’语法（双大括号）

<span>{{mag}}</span>

MUstache标签将会替代为对象上的mag属性的值，无论何时，绑定的数据对象上mag属性发生了改变，插值处的内容都会更新。

通过使用v-once指令，你也能执行一次性插值，当数据改变时，插值处的内容不会更新。但是会硬性到该节点上的搜有的数据绑定。

<span v-once>this will never change{{mag}}</span>

纯html

：双大括号会将数据解释为纯文本，而非html，为了输出真正的html，你需要使用v-html指令

<div v-html="rawHtml"></div>

被插入的内容都会被当做html-数据绑定会被忽略，不能使用v-html来复合局部模板

属性：

MUstache不能在html属性中使用，赢使用v-bind指令：

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有效，如果条件被求值为false的话属性会被移除

<button v-bind:disable="someDynamicCondition">Button</button>

使用javascript表达式

vue提供了完全的javascript表达式支持

{{number + 1}}
{{ok?'yes':'no'}}
{{message.split("").reverse().join("")}}
<div v-bind:id="'list-'+id"></div>

每个绑定只能包含单个表达式，下面不会生效

{{var a=1}}
{{if(ok){return message}}}

指令：

是带有前缀的v-的特殊属性，指令属性的预期值是单一的javascript表达式（除了v-for）

<p v-if="seen">Now see you 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">

修饰符：

以半角句号.指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如：

.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();

<form v-on:submit.prevent="onSubmit"></form>

过滤器：

vue允许自定义过滤器，杯用作一些常见的文本格式化，添加在muntache插值的尾部，由管道符指示：

{{essage|capitalize}}

new Vue({
   filter:{
         capitalize:function(value){
　　　　　　　　if(!value) return ''
　　　　　　　　value=value.toString()
　　　　　　　　return value.charAt(0).toUpperCase()+value.slice(1)
　　　　　　
　　　　　　}     
    } 
})

过滤器可以串联

过滤器是js函数，因此可以接受参数

缩写：

v-bind缩写为    ：

v-on缩写为@