Vue.js 数据绑定

数据绑定

语法

插值

文本插值是最基本的形式，使用双大括号{{}}(类似于Mustache，所以文本中称作Mustache标签)

<span>Test: {{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会发出警告。

表达式

Mustache标签也接受表达式形式的值，表达式可由JavaScript表达式和过滤器构成。过滤器可以没有，也可以有多个。
表达式是各种数值、变量、运算符的综合体。简单的表达式可以是常量或者变量名称。表达式的值是其运算结果。

<!--JS表达式-->
{{cents/100}}
{{true?1:0}}
{{example.split(",")}}

<!--无效示例-->
{{var logo = 'DDFE'}}
{{if(true) return 'DDFE'}}

类似于Linux中的管道，Vue.js允许在表达式后面添加过滤符

{{example | toUpperCase}}

toUpperCase就是过滤器，其本质是一个JS函数，返回字符串的全大写形式。Vue.js允许过滤器串联。

{{example | filterA | filterB}}

过滤器还支持传入参数。

{{example | filterA | filterB}}

过滤器还支持传入参数。

{{example | filter a b}}

这是a和b均为参数，用空格隔开。

指令

指令是带有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>

分隔符

Vue.js中数据绑定的语法被设计为可配置的。如果不习惯Mustache风格的语法，可以自己设置。
我们可以在Vue.config中配置绑定的语法。Vue.config是一个对象，包含了Vue.js的所有全局配置，可以在Vue实例化前修改其中的属性。分隔符在Vue.config中源码定义如下：

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

1）delimiters

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

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

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

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