【Vue】天气预报功能--axios的使用实例

axios的教程

使用起来挺简单的，看文档再加上实例就能明白了。
文档链接点击这里

axios的安装

进入到项目文件夹下，运行终端，输入npm install axios --save，点击回车。

axios的使用

在哪里使用，在哪里引入。

比如我需要在App.vue页面使用axios，那么就在App.vue页面引入：

需求

做一个天气预报的页面，显示未来十五天的天气。默认显示地区为广州，支持搜索功能。

静态页面

将页面的标题抽取出来做成组件CardTitle
将页面中的表格抽取出来做成组件WeatherTable

App.vue

<template>
  <div class="container-fluid">
    <cardtitle :title="cityName" />
    <weathertable :weatherlist="WeatherList" :weathersearch="WeatherSeacrh" />
  </div>
</template>

<script>
  import axios from 'axios' //引入axios
  import CardTitle from './components/CardTitle.vue' //引入组件
  import WeatherTable from './components/WeatherTable.vue'

  export default {
     
    data() {
     
      return {
     
        //通过API获取到的天气数据存放在这个数组里面
        WeatherList: [],
        cityName:'广州'//默认显示广州的天气
      }
    },
    components: {
     
      cardtitle: CardTitle,//将组件映射为标签
      weathertable: WeatherTable
    },
    mounted() {
     	//生命周期钩子
    	this.WeatherSearch('广州');
    },
    methods: {
     
      WeatherSeacrh(cityName) {
     
        const url =
          `https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=您自己的apikey&area=${
       cityName}`;
        //使用axios发送ajax请求获取数据
        axios.get(url).then(response =>