一、前言

上一節我們介紹了axios+vue的基本使用，其中接口的調用步驟、數據的獲取方式都和我們之前開發步驟類似，需要注意的是 axios響應成功的回調函數中，this改變了，我們需要提前保存，然後使用保存的那個值就可以了。詳情可參考博文：Vue筆記整理，讓你快速入門Vue.js：04_3.網絡應用：axios+vue結合使用那麼如果邏輯再複雜一些呢？

咱們這一節就來學習一個網絡應用：天知道

二、實例代碼驗證

1、實現思路

天知道是一個查詢天氣的應用，應用的核心是查詢天氣，那麼怎麼查詢呢？

1.1、回車查詢

（1）按下回車

其中事件的綁定我們可以使用 v-on 指令，並且限制按鍵爲回車，通過事件修飾符來進行約束。

（2）查詢數據

接口的調用我們通過 axios，獲取用戶的輸入我們可以通過 v-model 來實現。

（3）渲染數據

最終生成的結果，它是一個列表結構，那麼我們要通過 v-for 指令，結合一個數組就可以啦。

數組的賦值，我們放在請求成功的回調函數中，this 已經不是之前那個了，這個時候我們就需要額外的保存一個 that。

天氣的信息是通過調用接口獲取到的，接口文檔如下：

1.2、代碼實現

（1）創建vue實例、導入js文件、監聽回車鍵事件

創建vue實例，定義方法【main.js】

var app = new Vue({
    el: "#app",//通過 el 把vue實例，掛載給元素
    methods: {//方法定義
        searchWeather: function () {
            console.log('天氣查詢');
        }
    },
})

導入自己的 js 文件【模板.html】

    <!-- 導入自己的js -->
    <script src="./js/main.js"></script>

@keyup.enter="searchWeather" 監聽回車鍵，指定觸發的方法爲 searchWeather【模板.html】

<input type="text" @keyup.enter="searchWeather" class="input_txt" placeholder="請輸入查詢的天氣"/>

（2）進行雙向數據綁定

聲明變量，要查詢的城市【main.js】

    data: {
        city: '',//聲明變量，要查詢的城市
    },

input 輸入框 v-model="city"，拿到輸入的內容【模板.html】

<input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="請輸入查詢的天氣"/>

在方法裏面，拿到輸入框輸入的內容【main.js】

    methods: {//方法定義
        searchWeather: function () {
            console.log('天氣查詢');
            console.log(this.city);//拿到輸入框輸入的內容
        }
    },

（3）在Vue實例方法中，通過 axios 調用接口獲取數據

methods: {//方法定義
        searchWeather: function () {
            console.log('天氣查詢');
            console.log(this.city);//拿到輸入框輸入的內容

            // 調用接口
            var that = this;// 保存this
            //city的值，進行了雙向數據綁定，輸入框輸入內容，回車按鍵監聽，即可獲取到
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                .then(function (response) {
                    console.log(response);
                    console.log(response.data.data.forecast);

                    //給空數組賦值
                    //因爲是回調函數，this已經改變了。所以用that保存一下，然後再如下調用
                    that.weatherList = response.data.data.forecast
                    
                })
                .catch(function (err) { })
        }

    },

問題：response.data.data.forecast 來源？

（1）谷歌瀏覽器---》檢測---》輸入“北京”按回車

（2）console.log(response);

查看通過 response 查看服務器返回的內容，如下：

即 response.data.data.forecast 能獲取到相應數據

三、具體代碼

1、模板.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>天知道</title>
  <!--
  1、link 引入
  text/css： 純文本css代碼
  2、rel 做什麼用  
  stylesheet:樣式表
  3、href 引入的是什麼？
  MyStyle.css
  -->
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <div class="wrap" id="app">


    <div class="search_form">
      <div class="logo"><img src="img/logo.png" alt="logo" /></div>
      <div class="form_group">
        <!-- city在Vue實例中聲明定義，通過v-model進行雙向數據綁定 -->
        <!-- @keyup.enter="searchWeather" 監聽回車鍵，指定觸發的方法爲 searchWeather -->
        <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="請輸入查詢的天氣"/>
        <button class="input_sub">搜 索</button>
      </div>

      <div class="hotkey">
        <a href="javascript:;">北京</a>
        <a href="javascript:;">上海</a>
        <a href="javascript:;">廣州</a>
        <a href="javascript:;">深圳</a>
      </div>
    </div>


    <!-- 天氣信息 -->
    <ul class="weather_list">
      <!-- weatherList在Vue實例中聲明定義，通過axios調用接口，獲得實際數據 -->
      <li v-for="item in weatherList">
        <!-- 天氣類型。如：多雲、晴、雷雨等 -->
        <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
        <!-- 高低溫攝氏度 -->
        <div class="info_temp">
          <b>{{ item.low }}</b>
          ~
          <b>{{ item.high }}</b>
        </div>
        <!-- 日期 -->
        <div class="info_date"><span>{{ item.date }}</span></div>
      </li>
    </ul>

  </div>
  
  <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官網提供的 axios 在線地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- 導入自己的js -->
  <script src="./js/main.js"></script>
    
</body>

</html>

2、main.js

/*
  請求地址:http://wthrcdn.etouch.cn/weather_mini
  請求方法:get
  請求參數:city(城市名)
  響應內容:天氣信息

  1. 點擊回車
  2. 查詢數據
  3. 渲染數據
  */
var app = new Vue({
    el: "#app",//通過 el 把vue實例，掛載給元素
    data: {
        city: '',//聲明變量，要查詢的城市
        weatherList: []//聲明一個空數組
    },
    methods: {//方法定義
        searchWeather: function () {
            console.log('天氣查詢');
            console.log(this.city);//拿到輸入框輸入的內容

            // 調用接口
            var that = this;// 保存this
            //city的值，進行了雙向數據綁定，輸入框輸入，回車按鍵監聽，即可獲取到
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                .then(function (response) {
                    console.log(response);
                    console.log(response.data.data.forecast);

                    //給空數組賦值
                    //因爲是回調函數，this已經改變了。所以用that保存一下，然後再如下調用
                    that.weatherList = response.data.data.forecast
                    
                })
                .catch(function (err) { })
        }

    },
})

Vue筆記整理，讓你快速入門Vue.js：04_4.網絡應用：（項目）天知道-介紹-回車查詢

一、前言

二、實例代碼驗證

1、實現思路

1.1、回車查詢

（1）按下回車

（2）查詢數據

（3）渲染數據

1.2、代碼實現

（1）創建vue實例、導入js文件、監聽回車鍵事件

（2）進行雙向數據綁定

（3）在Vue實例方法中，通過 axios 調用接口獲取數據

問題：response.data.data.forecast 來源？

三、具體代碼

1、模板.html

2、main.js

四、內容-總結

git實戰筆記系列：生成 ssh 公鑰，查看獲取放到github或gitee上面

Vue筆記整理，10.項目-把本地項目託管到碼雲中

git實戰筆記系列：GitHub創建新分支及合併、常用git命令

git實戰筆記系列：Github打tag標籤，指定項目版本的使用

git實戰筆記系列：創建自己的github項目倉庫、克隆下載項目（2020-07-03）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結