Vueは小さな天気予報アプリケーションを実装します

これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気状況を確認できます。ぜひご覧ください:

HTMLコード

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

<ヘッド>
  <メタ文字セット="UTF-8" />
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
  <meta http-equiv="X-UA-compatible" content="ie=edge" />
  <title>Huanxin は知っている</title>
  <link rel="スタイルシート" href="css/reset.css" />
  <link rel="スタイルシート" href="css/index.css" />
</head>

<本文>
  <div class="wrap" id="app">
    <div class="検索フォーム">
      <div class="logo"><p style="color: red;text-align: center; font-size: 64px;">天気を確認する</p></div>
      <div class="form_group">
        <input type="text" class="input_txt" placeholder="検索したい天気を入力してください" v-model="city" @keyup.enter="queryWeather" />
        <button class="input_sub" @click="queryWeather">
          検索</button>
      </div>
      <div class="hotkey">
        <!-- <a href="javascript:;" @click="clickSearch('北京')">北京</a>
          <a href="javascript:;" @click="clickSearch('上海')">上海</a>
          <a href="javascript:;" @click="clickSearch('広州')">広州</a>
          <a href="javascript:;" @click="clickSearch('深圳')">深圳</a> -->
        <a href="javascript:;" v-for="hotCitys の都市" @click="clickSearch(city)">{{ city }}</a>
      </div>
    </div>
    <ul class="天気リスト">
      <li v-for="(item,index) in predictionList" :key="item.date" :style="{transitionDelay:index*100+'ms'}">
        <div class="info_type">
          <span class="iconfont">{{ アイテムタイプ }}</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>
  <スクリプト>
    新しいVue({
      el: "#app",
      データ： {
        都市:「武漢」、
        予測リスト: [],
        hotCitys: ["北京", "上海", "広州", "深セン"]
      },
      メソッド: {
        クエリ天気() {
          this.forecastList = [];
          アクシオス
            .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
            .then(res => {
              コンソールログ(res);
              this.forecastList = res.data.data.forecast;
            })
            .catch(エラー => {
              コンソールログ(エラー);
            })
            .finally(() => { });
        },
        クリック検索(都市) {
          都市は、
          this.queryWeather();
        }
      }
    });
  </スクリプト>
</本文>

</html>

jsコード

/*
  リクエストアドレス: http://wthrcdn.etouch.cn/weather_mini
  リクエストメソッド: get
  リクエストパラメータ: city (都市名)
  応答内容: 天気情報 1. Enter キーをクリック 2. データを照会 3. データをレンダリング */
 var アプリ = 新しい Vue({
     el:"#アプリ",
     データ：{
         市：''、
         天気リスト:[]
     },
     メソッド: {
         検索天気:関数(){
            // console.log('天気クエリ');
            // コンソールにログ出力します。
            //インターフェースを呼び出す//これを保存する
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
            .then(関数(応答){
                // console.log(応答);
                console.log(応答データ.データ予測);
                that.weatherList = response.data.data.forecast
            })
            .catch(関数(エラー){})
         }
     },
 })

ホームページの CSS ファイル

体{
    フォントファミリ:'Microsoft YaHei';   
}
。包む{
    位置: 固定;
    左:0;
    トップ:0;
    幅:100%;
    高さ:100%;
    /* 背景: 放射状グラデーション(#f3fbfe, #e4f5fd, #8fd5f4); */
    /* 背景:#8fd5f4; */
    /* 背景: 線形グラデーション(#6bc6ee, #fff); */
    背景:#fff;

}
.検索フォーム{
    幅:640ピクセル;
    マージン:100px 自動 0;
}
.logo画像{
    表示:ブロック;
    マージン:0 自動;
}
.form_group{
    幅:640ピクセル;
    高さ:40px;
    上マージン:45px;
}
.input_txt{
   幅:538ピクセル;
   高さ:38px;
   パディング:0px;
   フロート:左;
   境界線:1px実線 #41a1cb;
   アウトライン:なし;
   テキストインデント:10px;
}

.input_sub{
    幅:100ピクセル;
    高さ:40px;
    境界線:0px;
    フロート: 左;
    背景色: #41a1cb;
    色:#fff;
    フォントサイズ:16px;
    アウトライン:なし;
    カーソル: ポインタ;
    位置: 相対的;
}
.input_sub.loading::before{
    コンテンツ：'';
    位置: 絶対;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    背景: url('../img/loading.gif');
}

.ホットキー{
    マージン:3px 0 0 2px;
}

.ホットキー a{
    フォントサイズ:14px;
    色:#666;
    パディング右:15px;
}
.天気リスト{
    高さ:200px;
    テキスト配置:中央;
    上マージン:50px;
    フォントサイズ:0px;
}
.weather_list li{
    表示:インラインブロック;
    幅:140ピクセル;
    高さ:200px;
    パディング:0 10px;
    オーバーフロー: 非表示;
    位置: 相対的;
    background:url('../img/line.png') 右 中央 繰り返しなし;
    背景サイズ: 1px 130px;
}

.weather_list li:last-child{
    背景:なし;
}

/* .weather_list .col02{
    背景色: rgba(65, 165, 158, 0.8);
}
.天気リスト.col03{
    背景色: rgba(94, 194, 237, 0.8);
}
.天気リスト.col04{
    背景色: rgba(69, 137, 176, 0.8);
}
.天気リスト.col05{
    背景色: rgba(118, 113, 223, 0.8);
} */


.info_date{
    幅:100%;
    高さ:40px;
    行の高さ:40px;
    色:#999;
    フォントサイズ:14px;
    左:0px;    
    下:0px;    
    上マージン: 15px;
}
.info_date b{
    フロート: 左;
    左マージン:15px;
}

.info_type スパン{
    色:#fda252;
    フォントサイズ:30px;
    行の高さ:80px;
}
.info_temp{
    フォントサイズ:14px;  
    色:#fda252;
}
.info_temp b{
    フォントサイズ:13px;
}
.temp .アイコンフォント {
    フォントサイズ: 50px;
  }

CSSファイルをリセットする

本文、ul、h1、h2、h3、h4、h5、h6{
    マージン: 0;
    パディング: 0;
}
h1、h2、h3、h4、h5、h6{
    フォントサイズ:100%;
    フォントの太さ:通常;
}
{
    テキスト装飾:なし;
}
ul{
    リストスタイル:なし;
}
画像{
    境界線:0px;
}

/* フローティングをクリアして、上部のマージンの崩壊を解決します*/
.clearfix:before、.clearfix:after{
    コンテンツ：'';
    表示:テーブル;    
}
.clearfix:後{
    クリア:両方;
}
.clearfix{
    ズーム：1;
}

.fl{
    フロート:左;
}
.fr{
    フロート:右;
}

テスト結果