利用Vue.js2.0实现购物车和地址选配功能

 

根据慕课网-利用Vue2.0实现购物车和地址选配功能教程，通过利用Vue2.0来实现电商平台的简单功能。

 

vue中的$http请求服务.

通过调用http服务，对.json文件发送http请求，通过遍历数组数据完成页面渲染

引入vue-resource.js，即可以使用全局的 Vue.http 或者在 Vue 实例中的 this.$http 调用 http 服务。

使用方法：

// 全局 Vue 对象
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// Vue 实例
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

部分源代码：

cartView: function () {
    	// var _this = this;
    this.$http.get('data/cartData.json').then(res=>{
      //then()方法是异步执行就是当.then()前的方法执行完后再执行then()内部的程序.避免了数据没获取到等的问题
  	  //此处使用了箭头函数，使得内部的this与外部this保持一致，可以不用上面声明的_this了
    this.productList = res.data.result.list;
  	  // this.totalMon