Vue 网络请求数据 vue-resource

一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 安装vue-resource

//从包管理下载vue-resource包，并更新到项目的package.json里
cnpm install vue-resource --save

五 修改代码

├── src
│ ├── App.vue
│ ├── components
│ │ └── Home.vue
│ ├── main.js

App.vue

Home.vue

main.js

import Vue from 'vue'
import App from './App.vue'

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

new Vue({
  el: '#app',
  render: h => h(App)
})

六 运行

npm run dev

image.png

七 总结

1 了解js网络库vue-resource的使用，还有其他备选axios，fecth-jsonp
《1 安装vue-resource
cnpm install vue-resource --save

《2 导入vue-resource
main.js
import VueResource from 'vue-resource'
Vue.use(VueResource)

《3 使用vue-resource
thos.$http.get(url).then((response)=>{

},function(err){

})

2 批量假的json的api，及批量生成假json数据方法。其他工具还有yapi swagger

八 参考

https://github.com/pagekit/vue-resource vue-resource代码库
https://jsonplaceholder.typicode.com/ 假的json数据api提供网站
https://fakejson.com/ 假的json数据生成网站