安装
本地环境安装路由插件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>
声明：
请尊重博客园原创精神，转载或使用图片请注明：
博主：xing.org1^
出处：http://www.cnblogs.com/padding1015/
