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：过滤器的2种写法

<template>
  <div>
    <ul>
      <li v-for="(item,index) in arry">
          {{ item.name | capitalize(index)  }}
      </li>


      <li v-for="(item,index) in arry">
        {{ showName(item,index) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      arry:[
        {
          name:'销毁1',
          age:10
        },
        {
          name:'销毁2',
          age:20
        },
        {
          name:'销毁3',
          age:30
        },
        {
          name:'销毁4',
          age:40
        },
        {
          name:'销毁5',
          age:50
        },
        {
          name:'销毁6',
          age:60
        },
        {
          name:'销毁7',
          age:70
        },
      ]
    }
  },
  //过滤器的写法，第一个参数是html中|前面的变量，然后才会跟传送进来的index
  filters: {
    capitalize: function (name,index) {
     if(index>3){
       return name;
     }
    }
  },
  methods:{
    showName(item,index){
      if(index>3){
        return item.name;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

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$>