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