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

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="con">
<h1>購物車程序</h1>

<table class="table">
<tr>
<th>序號</th>
<th>商品</th>
<th>單價</th>
<th>數量</th>
<th>小計</th>
<th>操作</th>
</tr>
<tr v-for="x in goods_list">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td class="price">￥{{x.price}}</td>
<td>
<input type="button" value="-" class="add" v-on:click="jian(x)">
<input type="text" :value="x.num" class="num num2" data-max="5" v-on:input="changeNumber($event,x)">
<input type="button" value="+" class="sub" v-on:click="jia(x)">
</td>
<td class="tprice price1">￥{{ x.price * x.num}}</td>
<td><input type="button" value="移除購物車" class="del" v-on:click="remove(x)"></td>
</tr>

</table>
<table>
<tr>
<th>購買商品總數量</th>
<th>總價</th>
</tr>
<tr>
<td class="tnum">{{count}}</td>
<td class="sumprice">￥{{total}}元</td>
</tr>
</table>
</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: ".con",
        data : model
    });
效果見下圖：

計算屬性：

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

修改下初始化Vue代碼部分

var table=new Vue({
el:".con",
data:{goods_list},
methods:{
//改變input的值的時候觸發
changeNumber: function(event,x){
var obj=$(event.target);
x.num = parseInt(obj.val());
},
//刪除
remove: function (x) {
if(confirm("您確定要刪除嗎？")){
goods_list.splice(x, 1);
}else{
return false;
}

},
//加
jia:function(x){
if(x.num>=x.max){
x.num=x.max
}else{
x.num+=1;
}
},
//減
jian:function(x){
if(x.num==1){
x.num==1
}else{
x.num-=1;
}
}
},
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;
}
},

})

綁定事件

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

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

<tr v-for="x in goods_list">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td class="price">￥{{x.price}}</td>
<td>
<input type="button" value="-" class="add" v-on:click="jian(x)">
<input type="text" :value="x.num" class="num num2" data-max="5" v-on:input="changeNumber($event,x)">
<input type="button" value="+" class="sub" v-on:click="jia(x)">
</td>
<td class="tprice price1">￥{{ x.price * x.num}}</td>
<td><input type="button" value="移除購物車" class="del" v-on:click="remove(x)"></td>
</tr>

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

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

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

methods:{
//改變input的值的時候觸發
changeNumber: function(event,x){
var obj=$(event.target);
x.num = parseInt(obj.val());
},
//刪除
remove: function (x) {
if(confirm("您確定要刪除嗎？")){
goods_list.splice(x, 1);
}else{
return false;
}

},

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

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

VUE.JS實現購物車功能