zoukankan      html  css  js  c++  java
  • 第十三课 axios请求数据

    Home.vue

    <template>
    <!-- 通过URL api拿到接送数据并做页面展示 -->
        <!-- 所有的内容要被根节点包含起来 -->
        <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>
     
     
     
     
    App.vue
    <template>
    <!-- 通过URL api拿到接送数据并做页面展示 -->

      <div id="app">


         <v-home></v-home>


      </div>
    </template>

    <script>

       import Home from './components/Home.vue';

       export default {
          data () {
            return {

             msg:'你好vue'
            }
          },
          components:{   /*前面的组件名称不能和html标签一样*/
            'v-home':Home,
          }

        }
    </script>


    <style lang="scss">


    </style>
     
  • 相关阅读:
    ios8消息快捷处理——暂无输入框
    animateWithDuration 动画的速度选择
    对网页进行修改js代码
    如何对网页进行长截图
    centos快速配置yum源
    No module named 'Crypto.PublicKey' 完美解决办法
    Virtualenv 环境配置
    Python逻辑运算符的本质
    Django 使用Contenttype组件创建多关联数据库表
    Django Rest Framework url注册器组件 | 响应器组件 | 分页器组件
  • 原文地址:https://www.cnblogs.com/netflix/p/14626764.html
Copyright © 2011-2022 走看看