首页 > web前端 > js教程 > 通过在Vue2.0中实现http请求以及loading展示

通过在Vue2.0中实现http请求以及loading展示

亚连
发布: 2018-06-01 11:08:51
原创
2951 人浏览过

下面我就为大家分享一篇Vue2.0 http请求以及loading展示实例,具有很好的参考价值,希望对大家有所帮助。

我们需要额外两个依赖vuex 和 axios:(还是接着上一个项目MyFirstProject写)

1

npm i vuex axios -D

登录后复制

首先简单的阐述下http请求

1、main.js 中引入axios

1

2

import axios from 'axios'

Vue.prototype.$http = axios;

登录后复制

2、focus.vue中写个函数获取数据

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<template>

    <p id="focus">

        <ul >

            <li v-for="(item,index) in focusList">

                <p class="fportraits">

                    <img :src="&#39;./src/&#39;+item.portrait" :alt="item.name">

                </p>

                <p class="details">

                    <p class="ftitle"><strong> {{ item.name }} </strong></p>

                    <p> {{ item.production }} </p>

                </p>

                <p class="isfocused">

                    <p>取消关注</p>

                </p>

                <p class="clearfix"></p>

            </li>

        </ul>

    </p>

</template>

<script>

    export default{

        data(){

            return {

                focusList:[] //存储请求返回的数据

            }

        },

        mounted(){

            this.getFocusList()

        },

        methods:{

            getFocusList(){   //http get请求data.json 的数据

                var vm = this;

                this.$http.get(&#39;src/assets/data/data.json&#39;)

                    .then(function(res){

                        vm.focusList = res.data;

                    })

                    .catch(function(err){

                        console.log(err)

                    })

            }

        }

    }

</script>

<style scoped>

#focus{text-align:left;}

#focus ul{margin:0 auto;width:50rem;border-bottom:none;}

#focus p{margin:0;}

#focus li{width:46rem;display:block;border-bottom:1px solid #ddd;padding:0.5rem 2rem;cursor:default;}

#focus img{height:4rem;margin-left:-1rem;}

.fportraits{float:left;width:4rem;height:4rem;border-radius:50%;overflow:hidden;}

.details{float:left;margin-left:1rem;}

.isfocused{float:right;font-size:0.8rem;height:0.8rem;line-height:0.8rem;margin:0;}

.clearfix{clear:both;}

</style>

登录后复制

获取成功后展示效果如图:

我的两个男神羡慕羡慕有没有很帅

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)

js经验分享 JavaScript反调试技巧

利用node.js对webpack打包

以上是通过在Vue2.0中实现http请求以及loading展示的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板