用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了，這部分代碼就不貼上來了，你們能夠自行實現。