Vue项目5：使用vue-resource

本博客在 Vue项目4 的基础上进行。

vue-resource可以实现异步加载数据

1.安装 axios和resource

npm install -g axios
npm install vue-resource --save

2.启动项目

  cd切换到工程目录，运行如下命令：

 npm run dev

3.使用vue-resource

修改main.js，在import Vue from 'vue'下一行添加如下import语句，并用Vue.use(vueResource)语句来使用vue-resource

import vueResource from 'vue-resource'

Vue.use(vueResource)

4. 请求获取数据

修改Users.vue

1）添加一个可以请求网络资源的方法，请求数据地址为 https://jsonplaceholder.typicode.com/users

get:function(){
//发送get请求
this.$http.get('https://jsonplaceholder.typicode.com/users').then(function(res){
this.users=res.data; 
console.log(res.data); 
},function(){
console.log('请求失败处理');
});
}

2）将data中的users清空

users: [],

3）在div里添加一个新的div

<div>
<input type="button" @click="get()" value="点我异步获取数据(Get)">
</div>

保存后，浏览器效果如下：

 

 

点击按钮后，效果如下：

看到如上显示，说明已成功获取数据。

 

 

完成！ enjoy it!