我叫大王来巡山

导航

 

插值

文本:数据绑定最常见的形式就是使用‘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缩写为@

posted on 2017-03-02 10:58  我叫大王来巡山  阅读(303)  评论(0编辑  收藏  举报