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

<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>

 

 

 

声明：

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

　　博主：xing.org1^

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