使用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双向数据绑定的特点，再也不用将数据抓出来再一个个赋值了。