介紹：

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ù)到頁面