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

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

1、插值

文本

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

<span>Message: {{ msg }}</span>

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

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

<span>This will never change: {{* msg }}</span>

原生HTML

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

<div>{{{ raw_html }}}</div>

其中的内容以原生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-bindv-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的浏览器都能正确解析,并且不会出现在最终渲染的标记中。缩写语法是完全可选的,不过随着使用的加深你将会越来越喜欢这种方式。

学院君

学院君 has written 554 articles

资深PHP工程师,Laravel学院院长