用vue.js實現購物車功能

購物車是電商必備的功能，可以讓用戶一次性購買多個商品，常見的購物車實現方式有如下幾種：

1. 用戶更新購物車里的商品后，頁面自動刷新。

2. 使用局部刷新功能，服務器端返回整個購物車的頁面html

3. 服務器端返回JSON格式，使用模板引擎+dom操作更新頁面

最近新學習了vue.js，一個輕量級的mvvm（Model-View-ViewModel），vue.js是數據驅動無須操作dom，它提供特殊的html語言，把dom和數據綁定在一起，一旦修改了數據，dom將會自動更新更新。

關於vue.js的學習，請參考《Vue.js——60分鍾快速入門》這篇文章或者去官網 https://cn.vuejs.org/ 學習。

下面就是用vue.js實現購物車。

第一步 定義view：

<div class="cart-box-body">
        <template v-if="goods_list.length">
        <table class="cart-table" style="width:100%;">
            <thead>
                <tr>
                    <th>商品名稱</th>
                    <th>單價</th>
                    <th>購買數量</th>
                    <th>合計</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(goods,index) in goods_list">
                    <td>{{ goods.name }}</td>
                    <td>{{ goods.price }}</td>
                    <td><input type="text" size="5" :value="goods.num" /></td>
                    <td>{{ goods.price * goods.num}}</td>
                    <td>
                        <a href="javascript:;">刪除</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            共{{ count }}件商品 購物車總金額：￥{{total}}元
        </div>
        </template>
        <template v-else>
            <div>購物車為空</div>
        </template>
    </div>

商品的總價欄位 使用自動計算，{{ goods.price * goods.num}} 

view里使用了template語法，如果購物車里有商品則顯示商品信息，否則就顯示“購物車為空”，語法比較簡單，大家看一下就明白了。

第二步 定義model：

    var model = {
        goods_list: [{name : "測試商品1",num : 1, price : 10.0},
                    {name : "測試商品2",num : 2, price : 20.0},
                    {name : "測試商品3",num : 3, price : 30.0},
                    {name: "測試商品4", num: 4, price: 40.0 }
                    ]
    };

第三步 將view和model綁定一起，初始化Vue對象

    new Vue({
        el: ".cart-box-body",
        data : model
    });

效果見下圖：

計算屬性：

有同學該提出疑問了，view我們用了count和total這2個變量，可model里沒有這2個變量啊，效果也是空的啊，別急別急，這2個值咱要用vue自動計算功能。

修改下初始化Vue代碼部分

new Vue({
        el: ".cart-box-body",
        data : model,
 computed:{ count : function(){ var num = 0; for(var i in this.goods_list){ num += parseInt(this.goods_list[i].num); } return num; }, total : function(){ var total = 0; for(var i in this.goods_list){ total += this.goods_list[i].price * this.goods_list[i].num; } return total; } }
    });

看到紅色加粗部分的代碼了沒，這就是自動計算商品總件數和總金額的函數，其中this對象指的就是data對象。

再看一下效果圖，是不是發現商品總件數和總金額就顯示出來了？

 

綁定事件

購物車里用戶會修改商品數量、移除商品等操作，這里我們就增加修改數量和刪除事件。

第一步 修改view，增加事件綁定：

                <tr v-for="(goods,index) in goods_list">
                    <td>{{ goods.name }}</td>
                    <td>{{ goods.price }}</td>
                    <td><input type="text" size="5" :value="goods.num" v-on:blur="changeNumber(goods,$event)" /></td>
                    <td>{{ goods.price * goods.num}}</td>
                    <td>
                        <a href="javascript:;" v-on:click="remove(goods)">刪除</a>
                    </td>
                </tr>

這里綁定事件用了v-on:事件名的方式，當然也可以用簡寫即“@事件名”，比如@click、@blur等等，不過Razor模版會把@事件識別為變量，所以這里還是用全名。

“changeNumber(goods,$event)”，我們要獲取input的值也就是原生dom對象，所以需要傳遞event，不過要用特殊變量$event。

第二步 Vue初始化增加methods屬性：

        methods: {
            changeNumber: function (goods, event) {
                var obj = $(event.target);
                goods.num = parseInt(obj.val());
            },
            remove: function (goods) {
                model.goods_list.splice($.inArray(2, model.goods_list), 1);
            }
        }

 

至此我們的購物車基本功能就完成了，如果在購物車頁面添加商品到購物車里只需要往model.goods_list里增加對象即可。

再配合Ajax調用后台程序持久化購物車里的商品信息就OK了，這部分代碼就不貼上來了，大家可以自行實現。