使用vue-resource请求数据

前提，安装了vue以及vue-resource插件
你可以把这个两个插件下载下来，引用到自己的文件里
也可以使用npm安装vue-cli脚手架，再使用vue init webpack taskName构建一个新项目

1、在vue实例中，methods里面添加如下代码

new Vue({  el: "#app",  //vue监听范围,对应DOM结构中的#app元素  data() {    //声明vue变量    return{      userInfo : "",      goodsList : []    }  },  //2.0使用mounted,加载完成之后默认查询的方法  mounted:function () {    this.$nextTick(function () {      this.queryList();    })  },  //所有事件的绑定都在这里面  methods:{    queryList:function(){      const thisUrl = api.query_Goods_Info;      this.$http.post(thisUrl,        {          "userId" : null,          "token" : 20,          "pageSize" : 10,          "giftName" : null,          "status" : "y",          "currentPage" : 1        },{emulateJSON: true}).then(res=>{          this.userInfo = res.body;          this.goodsList = res.body.data;          if(this.totalPoints > 0){            this.totalPoints = res.body.totalPoints;          }      });    }  }})

emulateJSON: true //解决跨域问题
由于vue-resource请求数据时，在返回的数据对象多包了一层，真正的数据对象在body里面，故我们需要使用res.body.data 取到data数据

---

2、在DOM代码中，需要循环遍历的地方添加如下代码

<ul name="GoodsInfoUl" v-for="item in goodsList"><!--使用v-for指令遍历goodsList数据-->        <li class="floatLeft">          <div class="detail-img"><img :src="item.imageUrl"></div><!--item.imageUrl  imageUrl与返回json数据的字段命名一致  下同理-->          <div class="detail-text">            <div class="detail-text-top">              <div class="price">参考价：<span name="giftPrice" v-text="item.giftPrice"></span>元</div>              <div class="quantity">剩余：<span><em name="giftNum" v-text="item.giftNum"></em>份</span></div>              </div>            <div class="need-integral"><span name="integralNum" v-text="item.integralNum"></span>积分</div>            </div>          <div class="changebtn"><button href="javascript:" name="clickChange">点击兑换</button></div>          </li>      </ul>

这样一来，数据就轻松的渲染出来了，对比一下传统ajax方法请求，是不是简单很多了呢？使用vue双向数据绑定的特点，再也不用将数据抓出来再一个个赋值了。