完善慕課網Vue2.0購物車功能

vue一個Made in China創造出來的框架真的很66666~

如果你是剛入門還不太懂也沒有看慕課網上這門視頻的，請先看一遍或許你會收獲滿滿~

使用vue2.0實現購物車和地址選配功能這門課程，早之前就在慕課網上看了，個人感覺很不錯很適合剛入門vue的新手，最近做的項目都沒用vue怕自己生疏了所以就再做一下練練手順便完善一下老師沒有做的小功能。

課程中實現的功能：商品列表的渲染、使用過濾器格式化商品金額、實現單件商品的計算單選全選、實現商品總金額計算和刪除商品

完善的功能：

單選按鈕如果全部選中則全選按鈕為選中狀態，如果沒有全部選中則為默認狀態

使用計算屬性來改寫計算總金額；》

 

先看一下完善后的效果圖：

 

先創建一個vue的實例，以下列出的是本項目使用的選項參數

new Vue({
    el: '',  //掛載的元素
    data: {},  //數據
    mounted(){},  //生命周期鈎子
    computed: {}, //計算屬性
    methods: {},  //方法
    filters:{}   //過濾器
})

 

vue中常用的指令，本項目用到的是 v-for、v-bind、v-on、v-model、v-show

v-bind     動態的綁定數據。簡寫為 : 
         
v-on       綁定事件監聽器。簡寫為 @

v-for      循環數據     
        
v-model    在表單控件元素上創建雙向數據綁定

v-if   v-else-if   v-else     條件判斷指令

 

vue中的生命周期鈎子函數，本項目用到的是 mounted 鈎子函數

beforeCreate       數據綁定前

created            數據綁定后

beforeMount        掛載之前

mounted            掛載之后

beforeUpdate       更新之前

updated            更新之后

beforeDestroy      銷毀之前

destroyed          銷毀之后

 

這里簡但說一下思路，沒看過視頻想深入學習的請前往慕課網。

1、在data里聲明一個lists數組，用vue-resource獲取數據，把它寫成一個fetchData方法放在methods里，在mounted后調用這個方法把返回結果賦給lists

vue-resource和ajax一樣都是用來獲取數據的，但vue-resource返回的res是經過封裝的,我們需要的數據在body那個屬性里也可以使用data都可以

 

fetchData(){
    var _self = this;
    this.$http.get("../data/cart.json").then(function(res){
        _self.lists = res.data.result.productList
    },function(){

    })
}

2、使用v-for渲染商品列表, v-for寫法 v-for="item in items" 

3、使用filter過濾器將頁面所有的金額格式化統一保留兩位小數並添加“￥”符號：

全局過濾器方法：把 filter 掛到 Vue 上，Vue.filter(name,func); 第一個參數就是過濾器的名字，第二個參數就是一個回調函數 ，這里要注意一點如果你按照課上所寫的講全局過濾器寫在了底部，當你結合計算屬性computed使用的時候會報錯，所以將聲明的全局使用的都放在最頂端，讓它先加載

Vue.filter('money',function(val,type) {
    return "￥" + val.toFixed(2) + type;
});

局部過濾器方法：就是在之前實例里的 filters 選項參數里聲明

filters:{
    formatMoney: function(val){
        return "￥" + val.toFixed(2);
    }
}

4、給 “+” 和 “-” 添加點擊事件，點擊事件用 v-on:click 可以縮寫為 @click ，方法都寫在methods里，利用vue的數據雙向綁定 v-model指令來綁定 input里的值，至於這里傳的 item 和 -1這些參數，老師都講過了，不明白的去看視頻

<a href="javascript:;" @click="change(item,-1)">-</a>
<input type="text" disabled v-model="item.productQuentity">
<a href="javascript:;" @click="change(item,1)">+</a>

定義一個change方法

change(item,type){
    if(type>0){
        item.productQuentity++
    }else{
        item.productQuentity--;
        if(item.productQuentity<1){
            item.productQuentity=1
        }    
    }
}

5、給單選按鈕添加事件，同時需要使用 v-bind:class 動態添加class來改變按鈕選中和未選中樣式，如果你想實現淘寶或京東那種效果就是當你把單選按鈕都選中后底下的全選按鈕就要變為了選中狀態，這里你就需要在data里再聲明一個屬性 checkNum 用它來計算當前有幾個是選中狀態，所以在點擊按鈕的時候就要讓 checkNum++, 最后判斷 checkNum 是否等於按鈕的長度，就是這么簡單，就是這么自然~

<a href="javascipt:;" class="item-check-btn" :class="{'check':item.checked}" @click="chose(item)">
<svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
</a>

chose(item){
    if(typeof item.checked == "undefined"){
        this.$set(item,'checked',true);
        this.checkNum++
    }else{
        item.checked = !item.checked;
        if(item.checked){
            this.checkNum++
        }else{
            this.checkNum--
        }
    }
    this.lists.forEach( (element, index) => {
        if(element.checked && this.checkNum==this.lists.length){
            this.flag=true
        }else{
            this.flag = false
        }
    })
    if(this.flag){
        this.checkFlag = true
    }else{
        this.checkFlag = false
    }
}

6、給全選和取消全選按鈕添加事件同時動態綁定class,這就很簡單了直接循環遍歷，把所有對象里checked屬性設為 true,這里有一點需要注意的是當你全選或取消全選的時候一定要改變data里 checkNum 的值

selectAll(type){
    this.checkFlag = type;
    this.lists.forEach( (element, index) => {
        if(typeof element.checked == "undefined"){
            this.$set(element,'checked',type)
        }else{
            element.checked = type
        }
    });
    if(type){
        this.checkNum = this.lists.length
    }else{
        this.checkNum = 0;
    }
}

7、接下來就是計算總金額了，課上老師講的是在methods里寫了一個方法，在點擊增加和減少按鈕的時候去調用，我這里是用計算屬性computed來實現的，計算屬性的好處就是如果有改變了它會自動重新計算，不用再去點擊按鈕的時候調用，這里用到的 allMoney 需要在data里聲明一下：

computed: {
    totalMoney(){
        this.allMoney = 0;
        this.lists.forEach( (item, key) => {
            if(typeof item.checked != "undefined" && item.checked==true){
                this.allMoney += item.productQuentity*item.productPrice
            }
        });
        return this.allMoney
    }
}

8、刪除功能，點擊刪除按鈕彈出遮罩層和對話框，對於動態切換顯隱我們可以動態添加class也可以使用 v-if / v-show, 先在data里聲明一個 iShow 來控制顯隱，對於彈框我們綁定class這樣寫v-bind:class="{'md-show':iShow}" ,對於遮罩層我們使用v-show這樣寫v-show="iShow"，然后為刪除按鈕添加事件同時把刪除的元素傳遞過去，在data里聲明一個 deletId 用來記錄刪除的元素

<a href="javascript:;" class="item-edit-btn" @click="delet(item)">
<svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
</a>

delet(item){
    this.iShow=true;
    this.deletId = this.lists.indexOf(item);
},
deletOk(){
    this.lists.splice(this.deletId,1);
    this.iShow=false;
}

 

ok ，整個思路就這樣了，你也可以去看視頻自己試着練一下

技術更新實在太快了，就在今天Vue2.3.0發布了同時還發布了Vue2.3.0服務端渲染，如果你想了解vue可以猛擊下面的鏈接：

https://cn.vuejs.org/v2/guide/installation.html
    

Vue.js

Vuejs 2.0