基于 Laravel 的 Vue.js 中文学习教程 —— 数据绑定语法

Vue.js的模板基于DOM实现，这意味着所有的Vue.js模板都是有效的、可解析的HTML，并通过一些特殊属性做了增强。请记住这点，因为正是这个原因，使得Vue模板从本质上区分于基于字符串的模板。

1、插值

文本

最基本的数据绑定形式莫过于使用“Mustache”语法（mustache是一种模板语法，关于mustache参考：http://mustache.github.io/）插入文本：

Message: {{ msg }}

mustache标签会被相应数据对象的msg属性值替换，同时也会随着数据对象上msg属性值的变化而变化。

你也可以让其变成单次插值，这样它就不会随着数据对象属性的变化而更改：

This will never change: {{* msg }}

原生HTML

双重mustache标签会让数据变成纯文本，而不是HTML，要想输出真正的HTML，需要使用三重mustache：

{{{ raw_html }}}

其中的内容以原生HTML的形式插入，数据绑定会被忽略。如果你想要复用模板片段，需要使用partials。

注：在页面上动态渲染HTML很危险，因为这很容易造成XSS攻击，只能通过HTML插值插入信任的数据，不能插入用户提供的数据。

属性

mustache还可以用于HTML属性。

<div id="item-{{ id }}"></div>

属性插值在Vue.js指令和特殊属性中是不允许的，不过不用太担心，如果mustache被用在了错误的地方Vue.js会生成警告。

2、绑定表达式

放置到mustache标签中的文本被称作绑定表达式，在Vue.js中，绑定表达式包含单个JavaScript表达式，表达式后可以带一个或多个过滤器。

JavaScript表达式

到目前为止我们仅仅只是在模板中绑定了一些简单的属性键，实际上Vue.js在数据绑定中支持完整的JavaScript表达式功能：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

这些表达式会在各自的Vue实例作用域内计算，唯一的限制是每个绑定只能包含一个表达式，所以下列表达式无效：

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

过滤器

Vue.js允许追加可选的过滤器到表达式后面，通过管道符号来表示：

{{ message | capitalize }}

这里我们以管道的方式让message表达式的值经过内置的capitalize过滤器，这个过滤器实际上就是个JavaScript方法，作用是将输入字符串的第一个字母变成大写。Vue.js提供了很多内置的过滤器，后续我们将讨论如何编写自己的过滤器。

管道语法并不是JavaScript语法的一部分，所以不能将过滤器和表达式混在一起，只能将它们追加到表达式之后。

过滤器支持被链接：

{{ message | filterA | filterB }}

过滤器也可以接收参数：

{{ message | filterA 'arg1' arg2 }}

需要注意的是，过滤器方法总是将表达式作为第一个参数，带引号的参数会被当作原生字符串，不带引号的则按照表达式计算。上例中，字符串'arg1'会以第二个参数的形式传入过滤器，表达式arg2的值被计算后以第三个参数传入过滤器。

3、指令

指令是以v-开头的特殊属性。指令属性的值就是要绑定的表达式，所以上述提到的JavaScript表达式和过滤器规则在这里同样适用。指令的作用是当表达式的值改变的时候将在相应DOM上执行特定行为。让我们回顾一下之前使用过的例子：

<p v-if="greeting">Hello!</p>

这里， v-if 指令会根据 greeting 表达式的值移除/插入 <p> 元素。

参数

有些指令可以接收参数——通过在指令名称后以冒号分隔来标识。例如， v-bind 指令用于反应式更新某个HTML属性：

<a v-bind:href="url"></a>

这里 href 是一个参数，告诉 v-bind 指令绑定元素的 href 属性到表达式 url 的值，你可能已经注意到这和使用属性插值 href="{{url}}" 达到的效果一样，没错，实际上，属性插值在内部最终也是转化为 v-bind 绑定。

另外一个例子是 v-on 指令，该指令会监听DOM事件：

<a v-on:click="doSomething">

这里的参数是要监听的事件名称，后续我们还会深入讨论事件处理。

修饰符

修饰符是一些以点号分隔的特殊后缀，用于标识指令需要以特殊方式绑定。例如， .literal 修饰符告诉指令将属性值分割成原生字符串而不是表达式：

<a v-bind:href.literal="/a/b/c"></a>

当然，这似乎毫无意义，因为我们只需要设置 href="/a/b/c" ，而不需要使用指令。不过，这个例子只是为了演示语法的使用，后续我们将看到更多实际使用修饰符的例子。

4、缩写

v-前缀用于在模板中标识特定Vue属性，这一点在你使用 Vue.js 应用动态行为到已存在标记的时候很有用，不过在经常使用指令的情况下显得有些累赘。同时，构建SPA使用Vue.js管理所有模板的时候，v-前缀也显得无足轻重了。因此，Vue.js为两个最常用的指令 v-bind 和 v-on 提供了特定的缩写方式：

v-bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

or

<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

v-on

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

这也许和正常的HTML写法有些不同，但是所有支持Vue.js的浏览器都能正确解析，并且不会出现在最终渲染的标记中。缩写语法是完全可选的，不过随着使用的加深你将会越来越喜欢这种方式。