遇见Vue.js（二）【读写】

第二章 数据绑定

---

数据绑定试讲数据和视图想关联，当数据发生变化时，可以定更新视图。本章将介绍Vue.js中数据绑定的语法。

2.1 语法

2.1.1 插值

文本插值是最基本的形式，使用双大括号 {{ }} （类似于Mustache，所以本文中称作Mustache标签），代码示例如下：

<span>Text: {{text}} </span>

例子中的标签 {{text}}将会被相应的数据对象text属性的值替换掉，当text的值改变时，文本中的值也会联动地发生变化。有时候是需要渲染一次数据，后续数据变化不再关心，可以通过 “ * ” 实现，代码示例如下：

<span> Text: {{*text}} </span>

双大括号标签会把里面的值全部当做字符串来处理，如果值是HTML片段，则可以使用三个大括号来绑定，代码示例如下：

<div>Logo: {{{logo}}} </div>
logo: '<span>DDFE</span>'

双大括号标签还可以放在HTML标签内，示例如下：

<li data-id='{{id}}'></li>

总之，Vue.js提供了一系列文本渲染方式，足够我们应对日常的模板渲染情况。需要注意的是，Vue指令和自身特性内是不可以插值的，如果用错了地方，Vue.js会发出警告。

2.1.2 表达式

Mustache 标签也接受表达式形式的值，表达式可由JavaScript表达式和过滤器构成。过滤器可以没有，也可以有多个。

表达式是各种数值、变量、运算符的综合体。简单的表达式可以是常量或者变量名称。表达式的值是其运算结果，代码示例如下：

<!-- JS 表达式 -->
{{ cents / 100 }}  // 在原值的基础上除以100
{{ true ? 1 : 0 }} // 值为真，则渲染出1，否则渲染出0
{{ example.split(",") }}


<!-- 无效示例 -->
{{ var logo = 'DDFE' }} // 这是语句，不是表达式
{{ if (true) return 'DDFE' }} // 条件控制语句是不支持的，可以使用三元式

类似于Linux中的管道，Vue.js允许在表达式后面添加过滤符，代码示例如下：

{{example | toUpperCase}}

这里 toUpperCase就是过滤器，其本质是一个JS函数，返回字符串的全大写形式。Vue.js允许过滤器串联，代码示例如下：

{{example | filterA | filterB}}

过滤器还之处传入参数，代码示例如下：

{{example | filter a b}}

这里 a 和 b 均为参数，代码示例如下：

Vue.js还提供了很多内置的过滤器，在第六小节对此进行详细介绍。

2.1.3、指令

指令是带有v-前缀的特殊特性，其值限定为绑定表达式，也就是JavaScript表达式和过滤器。指令的作用是当表达式的值发生变化时，将这个变化也反映到DOM上。代码示例如下：

<div v-if="show">DDFE</div>

当 show 为 true 时，展示DDFE字样，否则不展示。还有一些指令的语法稍有不同，在指令和表达式之间插入一个参数，用冒号分隔，如v-bind指令。代码示例如下：

<a v-bind:href="url"></a>
<div v-on:click="action"></div>

2.2 分隔符

Vue.js中数据绑定的语法被设计为可配置的。如果不习惯Mustache风格的语法，则可以自己设置。

我们可以在Vue.config中配置绑定的语法。Vue.config是一个对象，包含了Vue.js的所有全局配置，可以在Vue示例话前修改其中的属性。分隔符在Vue.config中源码定义如下：

<!-- 源码目录 src/config.js -->
let delimiters = ['{{', '}}']
let unsafeDelimiters = ['{{', '}}']

1、delimiters

Vue.config.delimiters = ["<%", "%>"]

如果修改了默认的文本插值的分隔符，则文本插值的语法由 {{example}} 变为 <%example%>。

2、unsafeDelimiters

Vue.config.unsafeDelimiters = ["<$", "$>"]

如果修改了默认的HTML插值的分隔符，则HTML插值的语法由 {{{example}}} 变为 <$ example $>。

 

如果小伙伴们想要了解更多相关内容，可以加群技术交流：834223478