读Vue.js第三、四章

计算属性

• 在模板中双向绑定一些数据或表达式，但是表达式过长，就会变得臃肿，难以理解。
• 计算属性以函数的形式写在Vue实例内的computed选项内。

  <div id="app">
      {{reversedText}}
  </div>
  <script>
      var app  = new Vue({
           el:'#app',
           data:{
               text:'123,456'
               }
           computed:{
               reversedText:function(){
                   return this.text.split(',').reverse().join(',');   
               }
           }  
      })
  </script>

计算属性的用法

• 就算属性可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会跟新；
• 每个计算属性都自带一个getter跟setter；
• 计算属性依赖缓存，也就是说一个计算属性所依赖的数据发生变化时，他才会重新取值；
• methods也可以实现跟计算属性一样的效果，当是什么时候使用取决于是否使用缓存，一般在遍历大数组和大量计算时用计算属性；

绑定class的几种方式

<div id="app">
    <div :class = "{ 'active': isActive}">绑定class的几种方法</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isActive: true
        }
    });
    app.fullName = "john Doe";
</script>

• 对象可以绑定多个属性，以对象方式；
• 当逻辑复杂时还可以绑定一个计算属性；

数组语法

<div id="app">
    <div :class = "[activeCls,errorCls]">绑定class的几种方法</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            activeCls: 'active',
            errorCls:'error'
        }
    });
</script>

• 三元表达式切换class

    <div :class = "[isActive ？activeCls : '',errorCls ]">绑定</div>

• 当class有多个条件的时候这样写比较繁琐，可以在数组中使用对象语法；

    <div :class = "[{'active':isActive},errorCls ]">绑定class的几种方法</div>

• 与对象语法一样，也可以使用computed，data，methods三种方法；

在组件上使用

• 在组件上使用时，仅适用于自定义组件的最外层是一个根元素，否则无效；

绑定内联样式

<div id="app">
    <div :style = "{ 'color':color,'fontSize':fontSize+'px'}">文本</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            color:'red',
            fontSize: 14
        }
    });
</script>

• 注释：css属性名用驼峰命名或者短横分隔命名；
• 但是大多数情况下写在data和computed里；

<div id="app">
    <div :style = "styles">文本</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            styles: {
                color:'red',
                fontSize: 24+'px'
            }
        }
    });

-注：当多个样式对象时可以使用数组表示，使用：style时，Vue可以自动给特殊的css属性添加前缀；