Vue2.0でのhttpリクエストと読み込みの表示-jsチュートリアル-php.cn

Vue2.0でのhttpリクエストと読み込みの表示

php中世界最好的语言

リリース： 2018-03-28 11:11:24

オリジナル

1815 人が閲覧しました

今回は、Vue2.0 での http リクエストとロードの表示についてお届けします。Vue2.0 での http リクエストとロードの表示に関する注意事項とは何ですか? 以下は実際的なケースです。

さらに 2 つの依存関係が必要です: vuex と axios: (まだ前のプロジェクト MyFirstProject の後に書かれています)

1	`npm i vuex axios -D`

ログイン後にコピー

まず、http リクエストについて簡単に説明します

1 axios を main.js に導入します。

1 2	`import axios from` `'axios'` `Vue.prototype.$http` `= axios;`

ログイン後にコピー

2. focus.vue に関数を記述してデータを取得します

<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('src/assets/data/data.json')
                    .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>