插值
纯HTML
双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,需要使用v-html指令:
<div v-html="rawHtml"></div>
被插入的内容都会被当做HTML——数据绑定会被忽略。注意,不能使用v-html来复合局部模板,因为Vue不是基于字符串的模板引擎。组件更适合担任UI重用与复合的基本单元。
属性
Mustache不能在HTML属性中使用,应使用v-bind指令:
<div v-bind:id="dynamicTd"></div>
<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) { return message } }}
注意:模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如Math和Date。不应该在模板表达式中试图访问用户定义的全局变量。
过滤器
vue.js允许自定义过滤器,被用作一些常见的文本格式化。过滤器应该被添加在mustache插值的尾部,由“管道符”指示:
{{ message | capitalize }}
过滤器函数总接受表达式的值作为第一个参数。
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表达式的值将被求值然后传给过滤器作为第三个参数。
指令
指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。
参数
一些指令能接受一个“参数”,在指令后以冒号指明。例如,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-on
与 v-model
时,会看到更多修饰符的使用。
缩写
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>