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. 使用数据

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

页面中直接渲染使用：

<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的页面代码参考：

 1 <template>
 2     <div class="app-cont">
 3             <div class="vue-resource">
 4             <h3>获取其他地址里的json数据并进遍历</h3>
 5             <ul>
 6                 <li v-for="item in arrs" v-on:click="item.completed = ! item.completed">
 7                     <!-- {{item}} -->
 8                     <span class="id">{{item.userId}} </span>
 9                     <span class="title">{{item.title}}</span>
10                     <span class="completed" v-show="item.completed">选中</span>
11                 </li>
12             </ul>
13         </div>
14     </div>
15 </template>
16 <script>
17     export default{
18         name: "app-cont",
19         data () {
20             return {
21                 arrs:{}
22             }
23         },
24         methods: {
25         },
26         // 页面加载之前，用created钩子函数-获取网页数据
27         created() {
28             this.$http.get("http://jsonplaceholder.typicode.com/todos")
29             .then((data) => {
30                 // console.log(data)
31                 this.arrs = data.body;
32             })
33         }
34     }
35 </script>
36 <style scoped>
37     h2{
38         margin: 0;
39         padding: 10px 0;
40         background: #f5f5f5;
41     }
42     ul{
43         display: flex;
44         flex-wrap: wrap;
45         margin: 0 auto; 
46         padding: 10px 0;
47     }
48     li{
49         position: relative;
50         flex-grow: 1;
51         flex-basis: 200px;
52         text-align: center;
53         padding: 30px;
54         margin: 5px;
55         border: 2px solid Lightgreen;
56     }
57     li:hover{
58         background: Lightgreen;
59         cursor: pointer;
60     }
61     span{
62         color: #333;
63         font-weight: bold;
64     }
65     .vue-resource{
66         margin: 20px 40px;
67         border: 1px solid Lightgreen;
68         background: #eee;
69     }
70     span{
71         display: block;
72     }
73     span.id{
74         width: 75%;
75         margin: 0 auto 20px;
76         padding: 10px 0;
77         border-bottom: 1px solid Lightgreen;
78     }
79     
80     span.completed{
81         position: absolute;
82     top: -6px;
83     right: 10px;
84         z-index: 999;
85     width: 20px;
86     height: 45px;
87     padding-top: 5px;
88     color: #90ee90;
89     background: #000;
90     }
91 </style>
View Code

 

 

 

声明：

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

　　博主：xing.org1^

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

posted @ 2017-11-23 15:13  xing.org1^  阅读(7803)  评论(0)  编辑  收藏  举报