vue-resource和vue-router配置大致相同,它的目的就是讲后台的接口数据传输给前端进行显示。
首先需要安装vue-resource
npm install vue-resource --init-dev
安装完成后需要在main.js里面引用vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)
这样的话就可以在页面中调用后台接口了
先造一下数据,如我们请求的Users里面的数据改为网络请求接口的数据,
http://jsonplaceholder.typicode.com/users
这个是json数据的格式。
在dom未加载完成前需要加载我们的数据,那么我们可以在created()的钩子函数中请求后台接口。
created() {
this.$http.get("http://jsonplaceholder.typicode.com/users").then((data) => {
this.users = data.body;
})
}
请求的数据的格式我们可以用console.log(data)打印下看看
将我们的data赋值给我们的this.users
这样就可以达到请求后台接口的目的了。
后面我们将axios也可以达到同样的效果,并且可以比vue-resource达到更好的效果,而且还有接口封装,拦截器等等功能,后面再继续讲解。
Vue系列文章目录
- vue系列文章(1):对象绑定,属性绑定
- Vue系列文章(2)事件绑定,鼠标点击事件
- vue系列文章(3):事件修饰符
- Vue系列文章(4)键盘事件及键盘修饰符
- vue系列文章(5)双向数据绑定
- vue系列文章(6)计算属性computed
- vue系列文章(7)动态CSS类型绑定
- vue系列文章(8)条件渲染
- vue系列文章(9)v-for条件循环
- vue系列文章(10)vue实战项目demo
- vue系列文章(11):初始化多个实例对象
- vue系列文章(12)初始组件的应用
- Vue系列文章(13)vue cli脚手架
- vue系列文章(14)vue-cli脚手架,组件嵌套,全局组件注册和局部组件注册
- vue系列文章(15)属性传值props
- vue系列文章(16)传值和传引用的类型和区别
- vue系列文章(17)利用事件传递将子组件值传递给父组件
- vue系列文章(18)vue生命周期
- vue系列文章(19)vue路由配置
- vue系列文章(20) vue网络请求vue-resource
如果上面文章对你有用,打赏下我吧@*@