Vue 天気予報入門

この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。

レンダリング

実装コード

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <meta http-equiv="X-UA-compatible" content="ie=edge" />
    <title>神は知っている</title>
    <link rel="スタイルシート" href="css/reset.css" />
    <link rel="スタイルシート" href="css/index.css" />
    <スタイル>
      [v-マント] {
        表示: なし;
      }
    </スタイル>
  </head>

  <本文>
    <div class="wrap" id="app">
      <div class="検索フォーム">
        <div class="logo"><img src="img/logo.png" alt="ロゴ" /></div>
        <div class="form_group">
          <入力
            タイプ="テキスト"
            クラス="input_txt"
            placeholder="問い合わせたい天気を入力してください"
            v-model="都市"
            @keyup.enter="天気を検索"
          />
          <button class="input_sub" @click="searchWeather">検索</button>
        </div>
        <div class="hotkey">
          <a href="javascript:;" @click="searchWeatherByCity('北京')">北京</a>
          <a href="javascript:;" @click="searchWeatherByCity('Shanghai')">上海</a>
          <a href="javascript:;" @click="searchWeatherByCity('Guangzhou')">広州</a>
          <a href="javascript:;" @click="searchWeatherByCity('深圳')">深圳</a>
        </div>
      </div>
      <ul class="weather_list" v-cloak="block">
        <li v-for="天気リスト内の項目">
          <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>
  </本文>
</html>

インデックス.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{
    背景:なし;
}


.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{
    フロート:右;
}

メイン.js

/*
  リクエストアドレス: http://wthrcdn.etouch.cn/weather_mini
  リクエストメソッド: get
  リクエストパラメータ: city (都市名)
  応答内容: 天気情報 1. Enter キーをクリック 2. データを照会 3. データをレンダリング */
var アプリ = 新しい Vue({
    el: "#app",
    データ： {
        市： ''、
        天気リスト: []
    },
    メソッド: {
        検索天気() {
            if (this.city == '') {
                alert("都市名を入力してください!");
            } それ以外 {
                var that = this;
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + that.city).then(function (response) {
                    （レスポンスデータステータス == 1002）の場合{
                        alert("入力した都市名が間違っています。再入力してください!");
                        that.city = '';
                    } それ以外 {
                        that.weatherList = response.data.data.forecast;
                        console.log(応答データ);
                    }
                }).catch(関数(エラー) {
                    コンソール.log(エラー);
                })
            }
        },
        searchWeatherByCity(都市) {
            都市は、
            this.searchWeather();
        }
    },
})

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: