输出
{{ msg }}
两个括号输出实例的 data 属性值,并与实例的值绑定,这个语法叫 Mustache。
如果只想输出一次内容,不与实例的值绑定,可以使用 {{* msg }}
{{{ msg }}}
三个括号将 data 属性值以原生 html 的方式输出,但不会与实例的值绑定,如果需要复用模板片段,请使用 partials。
html 标签的特性也可以使用 Mustache。
<div id="item-{{ id }}"></div>
但属于 Vue 的指令和特有特性不可使用 Mustache,Vue 会给出提示。
表达式
放在 Mustache 标签内的文本称为绑定表达式。在 Vue.js 中,一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。
Vue 的数据绑定支持全功能的 JavaScript 表达式:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
这些表达式将在所属的 Vue 实例的作用域中计算,有一个限制是只能执行单行表达式,所以下面的做法是无效的:
<!-- 这是一个语句,不是一个表达式: -->
{{ var a = 1 }}
<!-- 流程控制也不可以,可改用三元表达式 -->
{{ if (ok) { return message } }}
过滤器
表达式后边可以接一个或多个过滤器,如 “管道符”,我们将 message 的值 “管输(pipe)” 到内置的过滤器 capitalize
:
{{ message | capitalize }}
过滤器 capitalize
其实是一个 JavaScript 函数,返回大写值,Vue 提供了数个内置的过滤器,将来会学习如何开发自己的过滤器。
注意管道语法不是 JavaScript 语法,因此不能在表达式内使用过滤器,只能添加到表达式的后面。
过滤器可以串联:
{{ message | capitalize | filterB }}
过滤器也可以接受参数:
{{ message | filterA 'arg1' arg2 }}
过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。这里,字符串 'arg1' 将传给过滤器作为第二个参数,表达式 arg2 的值在计算出来之后作为第三个参数。
指令
指令 (Directives) 是指特殊的带有 v-
前缀的特性,指令的值限制为绑定表达式,因此上面提到的 JavaScript 表达式和过滤器在这里也适用。
指令的职责是当表达式的值变化时把某些特殊行为应用到 DOM 上。
例如 v-if
,如果 greeting
的值为 true
或 false
,p 标签将被删除或插入:
<p v-if="greeting">Hello!</p>
参数
有些指令可以在名称后面添加参数,用 :
隔开,例如
<a v-bind:href="url"></a>
意思是把标签的 href
特性与表达式 url
的值绑定起来。
可以用特性插值 href="{{url}}"
获得同样的效果,实际上内部插值会转换成 v-bind
绑定。
另一个常用的指令是 v-on
,用来监听 DOM 事件。
<a v-on:click="doSomething">
缩写
v-bind
可以缩写为:
//完整语法
<a v-bind:href="url"></a>
//缩写语法
<a :href="url"></a>
v-on
可以缩写为:
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>