還是繼續入門 demo

這篇博文應該有點長，因為覺得了解了 computed 之後，應該還會繼續學下去，所以這裏會包含 computed 和 v-bind 的相關學習內容。

computed

什麽是計算屬性

所有的計算屬性都以函數的形式寫在 Vue 實例內的computed 選項內，最終返回計算後的結果。

為什麽使用計算屬性以及如何使用

邏輯過長，會變的臃腫，難以維護。

使用計算屬性可以完成各種復雜的邏輯，包括運算、函數調用等，只要最終返回一個結果即可。

如計算一個購物車總價：

計算屬性還可以依賴多個 Vue 實例的數據

計算屬性還可以依賴多個 Vue 實例的數據，只要其中任一數據變化，計算屬性就會重新執行，視圖也會更新

我們聲明了一個新的 Vue 實例 app2，然後在 app 中的計算屬性 prices 中調用 app2 中的屬性：

var app2 = new Vue({
  el:‘#app2‘,
  data:{
    msg:‘ this\‘s app2‘
  }
})
var app = new Vue({
  el:‘#app‘,
  data:{
    text:‘123,456,789‘,
    package:[
      {
        package1:{
          name:‘iphone‘,
          price:6900,
          count:2
        },
        package2:{
          name:‘ipad‘,
          price:5900,
          count:3
        }
      }
    ]
  },
  //定義計算屬性
  computed:{
    reverseText:function(){
      // this 代表了這個 Vue 實例
      return this.text.split(‘,‘).reverse().join(‘,‘)
    },
    prices:function(){
      var price = 0
        for(let key in this.package[0]){
          price += this.package[0][key].price*this.package[0][key].count
        }
      return price + app2.msg
    }
  }
})
 

計算屬性中的 getter 和 setter

每一個計算屬性都包含－個 getter 和一個 setter。

如果計算屬性直接跟一個 function，默認的就是 getter ，如上面那幾個例子。

如果計算屬性設置 getter 和 setter，同時給計算屬性設置值的時候，他就會根據 setter 先拿到新數據，處理過之後，再交由 getter 處理：

計算屬性和 methods 的區別

調用 methods 裏的方法也可以與計算屬性起到同樣的作用。那他們有什麽區別呢？

通過 demo 來理解，使用不同的方法獲取時間戳，我們在 methods 中定義一個方法：

methods:{
    thisTime:function(){
        return Date.now()
    }
}
 

在 computed 中定義一個屬性：

computed:{
    nowTime:function(){
        return Date.now()
    }
}

在頁面中顯示出來：

<!--下面使用了 計算屬性-->
{{ nowTime}}
<br>
<!--下面使用了 methods-->
{{ thisTime() }}

第一次渲染：

通過給 app.text 重新賦值，再次渲染：

可以看到，在渲染後，通過 methods 獲取到的數據發生了改變；而計算屬性獲取到的數據並沒有發生改變。

註意 渲染是渲染，頁面刷新是刷新；頁面刷新，一定會重新渲染；頁面重新渲染，頁面不一定要刷新。

methods 方法： 如果是調用方法，只要頁面重新渲染。方法就會重新執行，不需要渲染，則不需要重新執行

計算屬性：不管渲染不渲染，只要計算屬性依賴的數據未發生變化，就永遠不變，計算屬性是依賴於緩存的。

如何選擇 methods 和計算屬性：

是否需要緩存，需要緩存，選擇計算屬性；不需要緩存，使用 methods。

小總結

JSbin 代碼鏈接

• 創建以一個vue實例，並使用計算屬性和方法實現一個字符串翻轉的操作，寫出核心代碼

HTML:

<div id="app">
    {{ textReverse() }}
    {{ textReverse2 }}
</div>

JS:

var app = new Vue({
    el:‘#app‘,
    data:{
        text:‘reverse text‘
    },
    methods:{
        textReverse:function(){
            return this.text.split(‘‘).reverse().join(‘‘)
        }
    },
    computed:{
        textReverse2:function(){
            return this.text.split(‘‘).reverse().join(‘‘)
        }
    }
})

• 何時使用模板內表達式,何時使用計算屬性

當表達式所需的邏輯鏈較短，數據處理需求不大時，可以使用模板內表達式。

當邏輯鏈變長，邏輯更為復雜時，使用計算屬性。

• 計算緩存 vs Methods，兩者的區別

調用 methods 裏的方法可以與計算屬性起到同樣的作用。

他們的區別在於：

methods 方法： 如果是調用方法，只要頁面重新渲染。方法就會重新執行，不需要渲染，則不需要重新執行

計算屬性：不管渲染不渲染，只要計算屬性依賴的數據未發生變化，就永遠不變，計算屬性是依賴於緩存的。

• 代碼題

實例化一個vue實例，在data中定義一個姓氏firstName和名字firstName，還有一個全稱叫fullName。

提示：fullName = firstName + firstName。

需求：分別使用watch監聽器和計算屬性來實現以下功能實現，只要姓氏firstName和名字firstName中的任意一個改變，全稱fullname就會改變

老師真雞賊...還沒有看到 watch 吶哈哈，還是得去預習一下再做這道題了：

HTML:

<div id="app">
    {{ fullName }}
</div>

computed：

var app = new Vue({
    el:‘#app‘,
    data:{
        firstName:‘Zhang‘,
        lastName:‘da‘,
        fullName:‘Zhang da‘
    },
    computed:{
        fullName:{
            get:function(){
                return this.firstName + ‘ ‘ + this.lastName
            },
            set:function(newValue){
                let name = newValue.split(‘,‘)
                this.firstName = name[0]
                this.lastName = name[1]
            }
        }
    },
})

watch：

var app = new Vue({
    el:‘#app‘,
    data:{
        firstName:‘Zhang‘,
        lastName:‘da‘
    },
    watch:{
        firstName:function(val,oldVal){
            this.fullName = val + ‘ ‘ + this.lastName
            console.log(oldVal)
        },
        lastName:function(val,oldVal){
            this.fullName = this.firstName + ‘ ‘ + val
            console.log(oldVal)
        }
    }
})

v-bind

動態地綁定一個或多個特性，或一個組件 prop 到表達式。

在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。

之前在 (1) 已經略微了解過 v-bind，現在來更深入地了解一下他的用法。

綁定 class - 對象

綁定 class 對象語法，對象的鍵是類名，值是布爾值。

綁定 class - 計算屬性

當 class 的表達式過長或邏輯復雜時，還可以綁定一個計算屬性

active 就是類名，他是否會啟用，取決於他的值是否為 true。當 this.isActive 為 true 且 !this.isBorder 也為 true 時，這個樣式才能顯示出來。

綁定 class - 數組

綁定 class 數組，數組中的成員 對應著 類名

數組和對象混用

把對象寫入數組中，如：

HTMl:

<div :class=‘[{borderStyle:isActive},"className"]‘></div>

JS:

var app = new Vue({
    el:‘#app‘,
    data:{
        isActive:true,
        className:‘lineStyle‘
    }
})

CSS:

.lineStyle{
    line-height:666px;
}

綁定內聯樣式

還可以綁定內聯樣式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }"></div>

data: {
  activeColor: ‘red‘,
  fontSize: 30
}

還可以直接綁定到一個樣式對象：

<div v-bind:style="styleObject"></div>

data:{
    styleObject:{
        color:"red",
        fontSize:"30px"
    }
}

關於 v-bind 的 demo 詳見 JSbin

小總結

• 寫出本課中v-bind的作用，並分別寫出v-bind的變量語法，數組語法，對象語法

作用：通過數據綁定操作元素的 class 列表和內聯樣式

變量語法： v-bind:class=變量名，變量名在 Vue 實例裏的 data 對象內定義，變量的賦值內容則是類名。

數組語法： v-bind:class=[數組成員]，可以綁定多個 class，數組成員可以是對象，如果是對象的話，這個對象的值為 true ，這個 class 才可以會被使用；如果是數組成員是變量，則需要的 Vue 實例裏的 data 對象內設置變量，變量的賦值內容則是類名。

對象語法： v-bind:class = {類名:布爾值}，通過判斷布爾值，來確定 class 是否被啟用。

變量語法

HTML:

<div :href=‘url‘></div>

JS:

data:{
    url:‘http://www.acfun.cn/‘
}

數組語法

HTML:

<div :class=‘[className1,className2]‘></div>

JS:

data:{
    className1:‘divStyle‘,
    className2:‘borderStyle‘
}

對象語法

HTML：

<div :class=‘{divStyle:isActive}‘></div>

JS:

data:{
    isActive:true
}

綁定計算屬性:

HTML:

<div :class=‘className‘></div>

CSS:

.active{
    color:red;
}

JS:

...
data:{
    isActive:true,
    isBorder:true
},
computed:{
    className:function(){
        return {
            active: this.isActive || isBorder
        }
    }
}

本篇博文到此結束，主要學習了計算屬性 computed 和 v-bind 的一些用法，其實 Vue 的官方文檔裏面也有相關的教程，但是老師講得也是十分詳細，對照著看很容易理解，多寫 demo 也增加了對 Vue 的認識。

Vue.js 創建一個 CNODE 社區(2)