axios请求数据完整

最新推荐文章于 2024-07-23 16:20:57 发布

weixin_30682415

最新推荐文章于 2024-07-23 16:20:57 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：http://www.cnblogs.com/loaderman/p/11058161.html

该博客为转载内容，转载自https://www.cnblogs.com/loaderman/p/11058161.html ，涉及PHP技术领域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">
         首页组件

        <button @click="getData()">请求数据</button>
        <hr>
        <br>
       
        <ul>
            <li v-for="item in list">
            
                {{item.title}}
            </li>
        </ul>
    

    </div>

</template>


<script>

/*

请求数据的模板

    axios  的使用

    1、安装  cnpm  install  axios --save


    2、哪里用哪里引入axios

    
*/
   
   import Axios from 'axios';

    export default{
        data(){
            return {               
                list:[]
            }
        },
        methods:{

            getData(){
                
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                Axios.get(api).then((response)=>{
                    this.list=response.data.result;
                }).catch((error)=>{
                    console.log(error);

                })

            }
        },
        mounted(){  /*生命周期函数*/

            this.getData();

        }
       

    }

</script>

<style lang="scss" scoped>

    /*css  局部作用域  scoped*/

    h2{

        color:red
    }

    
</style>