Vue.js中数据绑定的语法教程

2024-02-21 15:01:03 63

数据绑定语法

Vue.js的模板是基于DOM实现的。这意味着所有的Vue.js模板都是可解析的有效的HTML，且通过一些特殊的特性做了增强。Vue模板因而从根本上不同于基于字符串的模板，请记住这点。

插值

文本

数据绑定最基础的形式是文本插值，使用“Mustache”语法（双大括号）：

Message:{{msg}}

Mustache标签会被相应数据对象的msg属性的值替换。每当这个属性变化时它也会更新。

你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

Thiswillneverchange:{{*msg}}

原始的HTML

双Mustache标签将数据解析为纯文本而不是HTML。为了输出真的HTML字符串，需要用三Mustache标签：

{{{raw_html}}}

内容以HTML字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用partials。

在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击。记住，只对可信内容使用HTML插值，永不用于用户提交的内容。

HTML特性

Mustache标签也可以用在HTML特性(Attributes)内：

注意在Vue.js指令和特殊特性内不能用插值。不必担心，如果Mustache标签用错了地方Vue.js会给出警告。

绑定表达式

放在Mustache标签内的文本称为绑定表达式。在Vue.js中，一段绑定表达式由一个简单的JavaScript表达式和可选的一个或多个过滤器构成。

JavaScript表达式

到目前为止，我们的模板只绑定到简单的属性键。不过实际上Vue.js在数据绑定内支持全功能的JavaScript表达式：

{{number+1}}

{{ok?'YES':'NO'}}

{{message.split('').reverse().join('')}}

这些表达式将在所属的Vue实例的作用域内计算。一个限制是每个绑定只能包含单个表达式，因此下面的语句是无效的：


{{vara=1}}


{{if(ok){returnmessage}}}

过滤器

Vue.js允许在表达式后添加可选的“过滤器(Filter)”，以“管道符”指示：

{{message|capitalize}}

这里我们将表达式message的值“管输（pipe）”到内置的capitalize过滤器，这个过滤器其实只是一个JavaScript函数，返回大写化的值。Vue.js提供数个内置过滤器，在后面我们会谈到如何开发自己的过滤器。

注意管道语法不是JavaScript语法，因此不能在表达式内使用过滤器，只能添加到表达式的后面。

过滤器可以串联：

{{message|filterA|filterB}}

过滤器也可以接受参数：

{{message|filterA'arg1'arg2}}

过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。这里，字符串'arg1'将传给过滤器作为第二个参数，表达式arg2的值在计算出来之后作为第三个参数。

指令

指令(Directives)是特殊的带有前缀v-的特性。指令的值限定为绑定表达式，因此上面提到的JavaScript表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。我们来回头看下“概述”里的例子：

Hello!

这里v-if指令将根据表达式greeting值的真假删除/插入

元素。

参数

有些指令可以在其名称后面带一个“参数”(Argument)，中间放一个冒号隔开。例如，v-bind指令用于响应地更新HTML特性：

这里href是参数，它告诉v-bind指令将元素的href特性跟表达式url的值绑定。可能你已注意到可以用特性插值href="{{url}}"rel="externalnofollow"获得同样的结果：这样没错，并且实际上在内部特性插值会转为v-bind绑定。

另一个例子是v-on指令，它用于监听DOM事件：

这里参数是被监听的事件的名字。我们也会详细说明事件绑定。

修饰符

修饰符(Modifiers)是以半角句号.开始的特殊后缀，用于表示指令应当以特殊方式绑定。例如.literal修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式：

当然，这似乎没有意义，因为我们只需要使用href="/a/b/c"rel="externalnofollow"而不必使用一个指令。这个例子只是为了演示语法。后面我们将看到修饰符更多的实践用法。

缩写

v-前缀是一种标识模板中特定的Vue特性的视觉暗示。当你需要在一些现有的HTML代码中添加动态行为时，这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候，你会感觉一直这么写实在是啰嗦。而且在构建单页应用（SPA）时，Vue.js会管理所有的模板，此时v-前缀也没那么重要了。因此Vue.js为两个最常用的指令v-bind和v-on提供特别的缩写：

v-bind缩写








Button


Button

v-on缩写

它们看起来跟“合法”的HTML有点不同，但是它们在所有Vue.js支持的浏览器中都能被正确地解析，并且不会出现在最终渲染的标记中。缩写语法完全是可选的，不过随着一步步学习的深入，你会庆幸拥有它们。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

Vue.js中数据绑定的语法教程

热门推荐

随机推荐