Vue学习（二）数据绑定

数据绑定是将数据和视图相关联，当数据发生变化时，可以自动更新视图。

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 }}l/在原值的基础上除以100
{{( true? 1 :0 }}//值为真，则渲染出1，否则渲染出0{ { example.split ( ", ") }}
<!--无效示例-->
{ { var logo = 'DDFE'}}//这是语句，不是表达式
{{if(true) return 'DDFE'}}//条件控制语句是不支持的，可以使用三元式
类似于Linux中的管道，Vue.,js允许在表达式后面添加过滤符，代码示例如下:
{ {example l toUpperCase } }
这里toUpperCase就是过滤器，其本质是一个JS函数，返回字符串的全大写形式。Vue.js允许过滤器串联,代码示例如下:
{ { example \ filterA | filterB}}
过滤器还支持传入参数，代码示例如下:
{ {example l filter a b } }
这里a和b均为参数、用空格隔开。
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}}}变为<$emampleS>。