Vue项目组件中使用axios获取天气数据

说明：

第一步：

默认情况下，我们的项目中并没有对axios包的支持，所以我们需要下载安装。在项目根目录中使用 npm安装包

　　　　需要进入到项目所在的文件夹下进行安装：

　　　　先 cd E:\python学习\01 VUE项目文件\myproject

第二步：

npm install axios              // 安装axios

第三步：

main.vue

在项目的axios.js文件中导入axios，并把axios对象挂载在vue属性中的一个子文件中，这样我们才能在组件中使用。//　main.vue 文件中

　　// The Vue build version to load with the `import` command
　　// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
　　import Vue from 'vue'    //全局导包，从node_modules。。。导包
　　import App from './App'   //加了  ./  就是局部导包，从别的目录中里面导包

　　import axios from 'axios';  //从node_modules目录中导包

　　//不起用生产环境下的配置
　　Vue.config.productionTip = false;


　　// 把一个变量变成一个属性使用
　　Vue.prototype.$axios=axios;   //把对象挂载在vue中


　　/* eslint-disable no-new */
　　new Vue({
  　　el: '#app',
  　　components: { App },   //App是组件名称，此时的App是一个对象，，如果有多个，则需要英文逗号隔开，
  　　template: '<App/>',    //表示当前这个#app绑定的是App.vue这个模板（这个App对应的就是App.vue的这个视图）

　　});

第四步：我将获取天气信息的代码放在项目的components文件夹下，的HomeSon文件下的子组件Header.vue中：　

<template>
    <div id="header">
      <span @click="get_data">{{msg}}</span>


  </div>
</template>

<script>
  export default {
    name:"Header",
    data: function(){
      return {
        msg:"这是Header组件里面的顶部信息",
      }
    },
    methods: {
      get_data: function(){
        this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then(function(response){
          console.log(response);
        }).catch(function(error){
          console.log(error);
        })
      }
    }
  }
</script>

Header.vue

第五步：在父组件Home.vue中嵌套子组件Header.vue。（分为三个步骤）   组件嵌套的三步骤：（在父组件中）　　

第一步：
    <template>
      <div id="Home">
        <Header/>
      </div>
    </template>

第二步：
<script>
  import Menu from './HomeSon/Menu'    //-- 调用子组件的三个步骤，第二步
  import Three_Menu from './HomeSon/Three_Menu'
  import Header from './HomeSon/Header'
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    },

 //第三步 -- 调用子组件的三个步骤，
    components:{Menu,Three_Menu,Header} , 
  }

</script>　　

父组件Home.vue代码

<template>
  <div id="Home">
    <span>这个是home组件里面的数据</span>
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
    <Menu :mynum="num" title="这个是父组件home向子组件Meun传递的数据"/>           <!-- 调用子组件的三个步骤，第一步 -->
    <Three_Menu/>
    <br>
    <br>
    <Header/>


  </div>
</template>


<script>
  import Menu from './HomeSon/Menu'    //-- 调用子组件的三个步骤，第二步
  import Three_Menu from './HomeSon/Three_Menu'
  import Header from './HomeSon/Header'
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    },

    components:{Menu,Three_Menu,Header} ,  //-- 调用子组件的三个步骤，第三步

  }
</script>
<!--scoped表示的局部样式，只给当前组件使用,如果没有声明则表示全局样式-->
<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

父组件Home.vue的代码

运行服务端后再进入浏览器中可以看到如下显示效果：