Vue-自带vue-resource插件实现http请求

安装

本地环境安装路由插件vue-resource：    cnpm install vue-resource --save-dev  

 *没有安装淘宝镜像的可以将 cnpm 替换成 npm

想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html，（打开搜索  镜像  即可跳转到对应位置）

 

配置

 

1.引用

main.js中用import引入进来：

import VueResource from 'vue-resource'

* 注意这里VueResource是自定义的名字。下边注册的时候会用到

 

2.注册

同样，main.js中注册，同vue-router

Vue.use(VueResource)

　　

3.配置

直接在对应页面的created钩子函数配置即可：

created() {
	this.$http.get("http://jsonplaceholder.typicode.com/todos")
	.then((data) => {
		// console.log(data)
		this.arrs = data.body;
})

　　链接是数据接口的地址，arrs是在本页面的data函数中定义的空对象，data.body是拿到的数据存放的地方。

 

4. 使用数据

根据拿到的数据结构和内容对应渲染

页面中直接渲染使用：

	
	{{item.userId}} 
	{{item.title}}
	选中

　　

 

用到vue-resource的页面代码参考：

 1 
16 
36 

View Code

 

 

 

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/