介紹：
vue-resource是Vue.js的插件咱娶，它可以通過XMLHttpRequest或JSONP發(fā)起請求并處理響應(yīng)。$.ajax能做的事情，vue-resource插件都能做到，而且vue-resource的API更為簡潔。
安裝
npm install vue-resource --save
安裝完后荣倾，需要在main.js中導(dǎo)入：
import VueResource from 'vue-resource'
Vue.use(VueResource)
請求數(shù)據(jù)過程
data () {
//存放數(shù)據(jù)
return {
userList:""
}
},
//生命周期 - 掛載完成（可以訪問DOM元素）
mounted(){
this.showData();
},
//存放方法
methods:{
showData:function () {
this.$http.get('http://localhost:8080/static/data1.json').then((response) => {
//響應(yīng)正確回調(diào)
this.userList=response.body; //把數(shù)據(jù)存放到data中
}, (response) => {
// 響應(yīng)錯誤回調(diào)
});
}
},
數(shù)據(jù)渲染
<ul class="userBox">
<li style="background: aquamarine">
<span>姓名</span>
<span>年齡</span>
<span>地區(qū)</span>
</li>
<li v-for="item in userList">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
<span>{{item.city}}</span>
</li>
</ul>
效果圖
渲染結(jié)果圖.png
github地址：https://github.com/liuyumei111/pro_name.git
下載時注意： 按照所需版本下載
本案例提交日期：Commits on Sep 26, 2018
本案例提交描述：vue-resource數(shù)據(jù)交互并渲染數(shù)據(jù)到頁面
