菜单

Vue 数据绑定语法

2019年6月15日 - JavaScript

数据绑定语法

数码绑定语法

Vue.js 的沙盘是依附 DOM 实现的。那意味着全体的 Vue.js
模板都以可分析的得力的 HTML,且经过一些独竖一帜的风味做了加强。Vue
模板由此从根本上不一样于基于字符串的沙盘,请牢记这一点。

Vue.js 的模板是凭借 DOM 达成的。那代表全体的 Vue.js
模板都以可解析的有效性的 HTML,且经过某个特别的性状做了巩固。Vue
模板因此从根本上分化于基于字符串的沙盘,请牢记这一点。

插值

插值

文本

数码绑定最基础的样式是文本插值,使用 “Mustache” 语法(双大括号):

Message: {{ msg }}

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

您也能够只管理单次插值,未来的数目变化就不会再招惹插值更新了:

This will never change: {{* msg }}

文本

原始的 HTML

双 Mustache 标签将数据分析为纯文本而不是 HTML。为了输出真的 HTML
字符串,须要用三 Mustache 标签:

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

内容以 HTML
字符串插入——数据绑定将被忽略。假如必要复用模板片断,应当选择partials

在网址上动态渲染任性 HTML 是可怜危急的,因为易于导致 XSS
攻击
。记住,只对可信赖内容使用
HTML 插值,永不用于用户提交的剧情。

数量绑定最基础的花样是文本插值,使用 “Mustache” 语法(双大括号):

HTML 特性

Mustache 标签也得以用在 HTML 本性 (Attributes) 内:

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

留神在 Vue.js 指令和独天性状内无法用插值。不必顾虑,若是 Mustache
标签用错了地点 Vue.js 会给出警告。

Message: {{ msg }}

绑定表达式

坐落 Mustache 标签内的公文称为绑定表明式。在 Vue.js
中,一段绑定表达式由叁个简短的 JavaScript
表明式和可选的二个或三个过滤器构成。

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

JavaScript 表达式

到近些日子截止,我们的模版只绑定到归纳的属性键。可是事实上 Vue.js
在多少绑定内匡助全职能的 JavaScript 表达式:

{{ number + 1 }}

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

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

那些表明式就要所属的 Vue
实例的效率域内计算。二个范围是各样绑定只好分包单个表明式,由此下边的语句是行不通的:

<!-- 这是一个语句,不是一个表达式: -->
{{ var a = 1 }}

<!-- 流程控制也不可以,可改用三元表达式 -->
{{ if (ok) { return message } }}

你也得以只管理单次插值,以往的数码变化就不会再招惹插值更新了:

过滤器

Vue.js 允许在表明式后增多可选的“过滤器 (Filter) ”,以“管道符”提醒:

{{ message | capitalize }}

这里大家将发布式 message 的值“管道输送(pipe)”到内置的 capitalize 过滤器,这么些过滤器其实只是一个JavaScript 函数,重临大写化的值。Vue.js
提供数个放置过滤器,在背后大家商聊到哪些支付自个儿的过滤器。

留神管道语法不是 JavaScript
语法,因而不能够在表达式内利用过滤器,只好增多到表明式的末尾。

过滤器能够串联:

{{ message | filterA | filterB }}

过滤器也足以接受参数:

{{ message | filterA 'arg1' arg2 }}

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

This will never change: {{* msg }}

指令

指令 (Directives)
是新鲜的涵盖前缀 v- 的特色。指令的值限定为绑定表明式,由此地点提到的
JavaScript
表明式及过滤器规则在此间也适用。指令的天职就是当其表达式的值改造时把某个特殊的行为选择到
DOM 上。我们来回头看下“概述”里的例子:

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

这里 v-if 指令将依据揭橥式 greeting 值的真假删除/插入 <p> 元素。

原始的 HTML

参数

稍许指令能够在其名目后边带一个“参数”
(Argument),中间放三个冒号隔断。比方,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">

这里参数是被监听的风云的名字。大家也会详细表明事件绑定。

双 Mustache 标签将数据剖判为纯文本而不是 HTML。为了输出真的 HTML
字符串,需求用三 Mustache 标签:

修饰符

修饰符 (Modifiers)
是以半角句号 . 先河的独辟蹊径后缀,用于表示指令应当以特别措施绑定。比方 .literal 修饰符告诉指令将它的值分析为三个字面字符串而不是三个表达式:

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

自然,那就像是从未意思,因为我们只要求选取 href="/a/b/c" 而不要选择多少个发令。那个例子只是为了演示语法。前面我们将见到修饰符更加多的实施用法。

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

缩写

v- 前缀是一种标记模板中一定的 Vue 特性的视觉暗意。当您必要在有个别存活的
HTML
代码中加多动态行为时,那个前缀能够起到很好的界别效果。但您在采取部分常用命令的时候,你会以为到一向如此写实际是啰嗦。而且在创设单页应用(SPA )时,Vue.js
会管理全体的模板,此时 v- 前缀也没那么主要了。因而Vue.js
为五个最常用的指令 v-bind 和v-on 提供非常的缩写:

剧情以 HTML
字符串插入——数据绑定将被忽视。如若必要复用模板片断,应当选择partials。

v-bind 缩写

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

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

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

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

在网址上动态渲染自便 HTML 是非常危险的,因为轻便产生 XSS
攻击。记住,只对可相信内容使用 HTML 插值,永不用于用户提交的源委。

v-on 缩写

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

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

它们看起来跟“合法”的 HTML 有一点点分化,不过它们在具有 Vue.js
匡助的浏览器中都能被科学地剖析,并且不会冒出在最终渲染的标识中。缩写语法完全部是可选的,可是随着一步步学习的中肯,你会庆幸具备它们。

HTML 特性

Mustache 标签也可以用在 HTML 天性 (Attributes) 内:

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

只顾在 Vue.js 指令和特别性状内不可能用插值。不必顾虑,假若 Mustache
标签用错了地方 Vue.js 会给出警告。

绑定表达式

座落 Mustache 标签内的文本称为绑定表达式。在 Vue.js
中,一段绑定表明式由贰个简约的 JavaScript
表明式和可选的三个或多少个过滤器构成。

JavaScript 表达式

到近来截止,大家的模版只绑定到总结的属性键。不过事实上 Vue.js
在数额绑定内补助全职能的 JavaScript 表明式:

{{ number + 1 }}

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

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

这几个表明式将要所属的 Vue
实例的效用域内总结。八个范围是各样绑定只可以分包单个表明式,由此上面包车型地铁话语是对事情未有什么帮助的:

<!-- 这是一个语句,不是一个表达式: -->
{{ var a = 1 }}

<!-- 流程控制也不可以,可改用三元表达式 -->
{{ if (ok) { return message } }}

过滤器

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 上。大家来回头看下“概述”里的事例:

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

此间 v-if 指令将依照说明式 greeting 值的真伪删除/插入 <p> 成分。

参数

有点指令能够在其名如今面带一个“参数”
(Argument),中间放三个冒号隔开。举例,v-bind 指令用于响应地创新 HTML
特性:

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

此间 href 是参数,它报告 v-bind 指令将成分的 href 天性跟表达式 url
的值绑定。恐怕你已注意到能够用特色插值
href="{{url}}" rel="external nofollow"获取一致的结果:那样没有错,并且实际在里头性子插值会转为
v-bind 绑定。

另一个例证是 v-on 指令,它用于监听 DOM 事件:

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

那边参数是被监听的轩然大波的名字。大家也会详细表明事件绑定。

修饰符

修饰符 (Modifiers) 是以半角句号 .
发轫的例外后缀,用于表示指令应当以特别措施绑定。譬喻 .literal
修饰符告诉指令将它的值分析为一个字面字符串而不是一个表明式:

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

本来,那不啻从未意义,因为咱们只须求采用
href="/a/b/c" rel="external nofollow"而不必选择多个命令。那些事例只是为了演示语法。前面大家将见到修饰符更加多的施行用法。

缩写

v- 前缀是一种标志模板中一定的 Vue 本性的视觉暗暗提示。当您要求在部分共处的
HTML
代码中增加动态行为时,这个前缀能够起到很好的分歧效果。但你在利用部分常用命令的时候,你会深感一直那样写实际是啰嗦。而且在营造单页应用(SPA
)时,Vue.js 会管理全部的模版,此时 v- 前缀也没那么主要了。由此Vue.js
为多个最常用的吩咐 v-bind 和v-on 提供特意的缩写:

v-bind 缩写

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

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

<!-- 完整语法 -->
<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
协理的浏览器中都能被科学地剖析,并且不会出现在结尾渲染的号子中。缩写语法完全部都以可选的,不过随着一步步就学的尖锐,你会庆幸具有它们。

总结

如上正是那篇小说的全部内容了,希望本文的源委对我们的求学可能专门的学业能拉动一定的增派,若是有问号大家能够留言交换,多谢大家对剧本之家的援助。

您恐怕感兴趣的稿子:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图