第二讲：项目实战Vue快速入门-用户管理-网络请求

Sian

1、接口地址：http://jsonplaceholder.typicode.com/users，该接口会返回一个用户信息的json对象数组；
2、需求分析：使用vue框架的http请求，将接口数据请求到本地变量中；

3、实现解析
3.1、默认情况下vue框架没有安装http请求的组件，需要先安装，在工程目录下使用命令

[AppleScript] 纯文本查看 复制代码

npm install vue-resource --save

3.2、安装好后再次启用项目，在main.js中引入vue-resource组件

[AppleScript] 纯文本查看 复制代码

// 引入网络请求组件
import vueResource from 'vue-resource'
Vue.use(vueResource)

3.3、在vue文件的<script>部分增加数据集合、初始化方法；
3.3.1、<script>中的export default {}里面中的定义是vue的特性，如果不能理解为什么会这样，要么就记住后续再慢慢消化，要么去官方https://cn.vuejs.org文档中慢慢啃，我建议先不管，按套路来写，见多了就自然明了了；
3.3.2、数据集合中一个data(){}函数，要求返回一个数组对象，根据我们业务需要，先定义一个users:[]的空数组；
3.3.3、初始化方法是一个函数created:function(){}，这个函数在加载页面时自动被调用，我们的http请求在这里实现；
3.4、vue框架网络请求的格式为this.$http.get()，参数为http请求地址，该方法会返回请求本身，所以后面还可以跟.then()方法，结果返回在该方法中接收处理，参数为带结果的函数；
3.4.1、http请求可以这么写

[JavaScript] 纯文本查看 复制代码

    this.$http.get("http://jsonplaceholder.typicode.com/users")
    .then(function(response){
      // console.log(response.data);
      this.users = response.data;
    });

3.4.2、对于初学才不能理解也正常，不能理解就记住这种写法，后续如果有相关的业务需求就用这个去套，这是最有效的方法！！

4、关键代码：
4.1、main.js

[AppleScript] 纯文本查看 复制代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

// 引入网络请求组件
import vueResource from 'vue-resource'
Vue.use(vueResource)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
main

4.2、App.vue

[AppleScript] 纯文本查看 复制代码

<!-- 1、模板结构 -->
<template>
  <div id="app">
    <!-- 显示用户数组 -->
    <p>{{users}}</p>
  </div>
</template>

<!-- 2、JS处理 -->
<script>
export default {
  name: 'app',
  // 数组集合
  data(){
    return {
      users:[],
    };
  },
  // 初始化方法
  created:function(){
    this.$http.get("http://jsonplaceholder.typicode.com/users")
    .then(function(response){
      // console.log(response.data);
      this.users = response.data;
    });
  }
}
</script>

<!-- 2、样式处理 -->
<style scoped>

</style>

5、最终结果
到目前为止，如果一切正常，应该会看到页面上显示的是从接口返回的一个json数组；