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引入进来：

1	import  VueResource from  'vue-resource'

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

 

2.注册

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

1	Vue.use(VueResource)

　　

3.配置

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

1 2 3 4 5 6

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

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

 

4. 使用数据

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

页面中直接渲染使用：

1 2 3 4 5 6

<li v- for = "item in arrs"  v-on:click= "item.completed = ! item.completed" >      <!-- {{item}} -->      <span  class = "id" >{{item.userId}} </span>      <span  class = "title" >{{item.title}}</span>      <span  class = "completed"  v-show= "item.completed" >选中</span> </li>

　　

 

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

  View Code

 

 

 

声明：

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

　　博主：xing.org1^

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