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的代碼

運行服務端后再進入瀏覽器中可以看到如下顯示效果：