VUE权威指南-第二章 数据绑定

2.1 语法
2.1.1插值
1：文本插值：使用{{}}形式，代码如下({{text}}会随text值的变化而变化)：

<span>{{text}}</span>

2：有时候值需要渲染一次数据，然后不再关心后续数据变化，可以通过*来实现，代码如下：

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

3：{{}}会把里面的值全部当做字符串来处理，如果值是HTML片段，则可以使用{{{}}},代码如下：

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

4：{{}}还可以放在HTML标签内，代码如下：

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

2.1.2 表达式
Mustache标签可以接受表达式形式的值，表达式可以是JS表达式或者过滤器；
1：JS表达式：

{{cents/100}}{{true?1:0}}{{example.split(',')}}

无效实例：

{{var logo='ddee'}}  //这是语句，不是表达式{{ if(true) return 'ddee' }}   //不支持条件控制语句

2：过滤器

{{ example | toUpperCase }}   //toUpperCase,返回字符串的全大写形式 

过滤器串联

{{ example | filterA | filterB }}   

过滤器传入参数

{{ example | filter a b  }}   

2.1.3 指令
指令是带有V-前缀的特殊字符，值限定为绑定表达式，指令的作用是当表达式的值发生变化时，将这个值变化也放映到DOM上，代码如下：

<div v-if='show'>DDEE</div>   //show为true时，展示DDEE字样，否则不展示

<div v-bind:href='url'>DDEE</div>   

2.2 分隔符
VUE中数据绑定的语法被设计为可配置的，不过不习惯Mustache风格的语法，可以自己设置
Vue.config是一个对象，包含了Vue.js的所有全局配置
分隔符在Vue.config中源码定义如下：

let delimiters=['{{', '}}']let unsafeDelimiters=['{{{', '}}}']

1:delimiters

Vue.config.delimiters=["<%" ,"%>"]       //{{example}}  <%example%>

2:unsafeDelimiters

Vue.config.unsafeDelimiters=["<$" ,"$>"]       //{{{example}}}  <$example$>