第二讲：项目实战Vue快速入门-用户管理-网络请求
本帖最后由 Sian 于 2017-12-28 11:59 编辑1、接口地址：http://jsonplaceholder.typicode.com/users，该接口会返回一个用户信息的json对象数组；
2、需求分析：使用vue框架的http请求，将接口数据请求到本地变量中；
3、实现解析
3.1、默认情况下vue框架没有安装http请求的组件，需要先安装，在工程目录下使用命令npm install vue-resource --save3.2、安装好后再次启用项目，在main.js中引入vue-resource组件// 引入网络请求组件
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请求可以这么写 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// 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 }
})
main4.2、App.vue<!-- 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数组；
页:
[1]