vue初级入门（vue-resource数据交互并渲染数据到页面

介绍：

vue-resource是Vue.js的插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。$.ajax能做的事情，vue-resource插件都能做到，而且vue-resource的API更为简洁。

安装

npm install vue-resource --save

安装完后，需要在main.js中导入：

import VueResource from 'vue-resource'
Vue.use(VueResource)

请求数据过程

   data () {
      //存放数据
      return {
        userList:""
      }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted(){
      this.showData();
    },
    //存放方法
    methods:{
      showData:function () {
        this.$http.get('http://localhost:8080/static/data1.json').then((response) => {
          //响应正确回调
          this.userList=response.body;   //把数据存放到data中
        }, (response) => {
          // 响应错误回调

        });
      }

    },

数据渲染

 <ul class="userBox">
        <li style="background: aquamarine">
          <span>姓名</span>
          <span>年龄</span>
          <span>地区</span>
        </li>
        <li v-for="item in userList">
          <span>{{item.name}}</span>
          <span>{{item.age}}</span>
          <span>{{item.city}}</span>
        </li>
      </ul>

效果图

渲染结果图.png

github地址：https://github.com/liuyumei111/pro_name.git

下载时注意： 按照所需版本下载

本案例提交日期：Commits on Sep 26, 2018
本案例提交描述：vue-resource数据交互并渲染数据到页面