安装
本地环境安装路由插件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)
4. 使用
直接在对应页面的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>
<template>
<div class="app-cont">
<div class="vue-resource">
<h3>获取其他地址里的json数据并进遍历</h3>
<ul>
<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>
</ul>
</div>
</div>
</template>
<script>
export default{
name: "app-cont",
data () {
return {
arrs:{}
}
},
methods: {
},
// 页面加载之前，用created钩子函数-获取网页数据
created() {
this.$http.get("http://jsonplaceholder.typicode.com/todos")
.then((data) => {
// console.log(data)
this.arrs = data.body;
})
}
}
</script>
<style scoped>
h2{
margin: 0;
padding: 10px 0;
background: #f5f5f5;
}
ul{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
padding: 10px 0;
}
li{
position: relative;
flex-grow: 1;
flex-basis: 200px;
text-align: center;
padding: 30px;
margin: 5px;
border: 2px solid Lightgreen;
}
li:hover{
background: Lightgreen;
cursor: pointer;
}
span{
color: #333;
font-weight: bold;
}
.vue-resource{
margin: 20px 40px;
border: 1px solid Lightgreen;
background: #eee;
}
span{
display: block;
}
span.id{
width: 75%;
margin: 0 auto 20px;
padding: 10px 0;
border-bottom: 1px solid Lightgreen;
}
span.completed{
position: absolute;
top: -6px;
right: 10px;
z-index: 999;
width: 20px;
height: 45px;
padding-top: 5px;
color: #90ee90;
background: #000;
}
</style>
