Vue 数据绑定

输出

{{ 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>