Vue の学習パート天気アプリの構築-jsチュートリアル-php.cn

Vue の学習パート天気アプリの構築

王林

リリース： 2024-09-03 16:05:11

オリジナル

675 人が閲覧しました

Learning Vue Part Building a weather app

Vue.js に飛び込むのは、直感的で柔軟性があり、驚くほど強力な、DIY キットの新しいお気に入りツールを発見するようなものです。 Vue を実際に使ってみた最初のサイドプロジェクトは天気予報アプリでした。このアプリは、フレームワークの機能や Web 開発全般について多くのことを教えてくれました。これまでに私が学んだことは次のとおりです。

1. Vue 入門: シンプルさとパワーの融合

Vue.js について私が最初に驚いたことの 1 つは、立ち上げて実行するのがいかに簡単かということです。多くのセットアップと構成を必要とする他のフレームワークとは異なり、Vue は非常に簡単でした。必要なのは Vue を組み込むための script タグだけで、レースに出発することができました。

天気予報アプリでは、Vue の createApp 関数を使用してアプリケーションをキックスタートしました。

const { createApp, ref } = Vue;

createApp({
    setup() {
        const locationValue = ref('');
        const responseMessage = ref(null);
        const selectedHourlyForecast = ref([]);
        const selectedFutureForecast = ref([]);
        // More code here...
    }
}).mount("#app")

ログイン後にコピー

このアプローチはクリーンであり、すべてを 1 か所に保持するため、アプリケーションの状態とロジックの管理が容易になります。

2. リアクティブデータバインディング: ref の魔法

Vue の反応性システムは、その傑出した機能の 1 つです。 ref を使用することで、データをリアクティブにすることができました。つまり、データに変更が加えられると DOM が自動的に更新されます。たとえば、ユーザーが場所を送信すると、DOM を手動で操作しなくても気象データが取得されて表示されます。

const locationValue = ref('');
const responseMessage = ref(null);

const submitLocation = async () => {
    try {
        const response = await fetch(`http://api.weatherapi.com/v1/forecast.json?key=${APIKEY}&q=${locationValue.value}&days=6&aqi=no&alerts=no`);
        const result = await response.json();
        responseMessage.value = result;
    } catch (error) {
        console.log("An error occurred while fetching weather data", error);
        alert("Location not found");
    }
};

ログイン後にコピー

データの変更に基づいた UI のシームレスな更新により、Vue.js はインタラクティブなアプリケーションの構築において非常に強力になります。

3. 条件付きレンダリング: 必要なもののみを表示

v-if や v-else などの Vue のディレクティブを使用すると、データの状態に基づいて要素を条件付きでレンダリングすることが簡単になります。私の天気アプリでは、次のディレクティブを使用して、気象データが利用可能な場合にのみ気象データを表示しました。

<div v-if="responseMessage">
    <div class="h1">{{responseMessage.current.temp_c}}°C</div>
    <div>{{responseMessage.location.name}}, {{responseMessage.location.country}}</div>
</div>
<div v-else>
    <div class="h1">N/A °C</div>
    <div>No location present</div>
</div>

ログイン後にコピー

この種の条件付きレンダリングにより、アプリがクリーンで有益な状態を保ち、必要なときに必要なものだけをユーザーに表示します。

4. ユーザー入力の処理: v-model の力

v-model ディレクティブを使用すると、Vue.js でのユーザー入力の処理が簡単になります。私のアプリでは、v-model を使用して入力フィールドを locationValue 変数に直接バインドし、リアクティブにしてデータをユーザーの入力と同期させました。

<input type="text" class="form-control" placeholder="Enter location..." v-model="locationValue">

ログイン後にコピー

このシンプルなバインディングにより、手動イベントリスナーの必要性がなくなり、定型コードが削減され、アプリケーションの保守性が向上しました。

5. 気象データの分析: v-for を使用した反復

時間ごとの天気予報や将来の天気予報などの複数のデータの表示は、Vue の v-for ディレクティブを使用して簡単に行えました。これにより、データの配列をループして動的にレンダリングできるようになりました。

<div v-for="(forecast, index) in selectedHourlyForecast" :key="index" class="p-2 text-center">
    <div>{{forecast.temp_c}}°C</div>
    <span class="icon"><img :src="'https:' + forecast.condition.icon" alt=""></span>
    <div class="font-weight-bold font-italic">{{forecast.condition.text}}</div>
    <div>{{forecast.time.slice(11,16)}}</div>
</div>

ログイン後にコピー

これにより、ユーザーの場所や時刻に応じて、さまざまな数のデータポイントを表示できる、柔軟で応答性の高い UI を簡単に作成できるようになりました。

6. エラー処理: 例外をキャッチすることを忘れないでください

API の使用には、ネットワークの問題や無効な場所など、常にエラーが発生する可能性が伴います。 Vue を使用すると、これらのエラーを簡単に適切に処理できるようになり、何か問題が発生したときにアプリがクラッシュしたり燃えたりすることがなくなりました。

catch (error) {
    console.log("An error occurred while fetching weather data", error);
    alert("Unable to retrieve weather details");
}

ログイン後にコピー

これは、予期せぬ状況に対処できる堅牢なアプリケーションを作成する際のエラー処理の重要性を理解するのに役立ちました。

まとめ

Vue.js を使用してこの天気アプリを構築することは、啓発的な経験でした。アプリケーションを構造化し、ユーザー入力に基づいてリアルタイムで更新される応答性の高い UI を作成する方法について多くを学びました。 Vue のシンプルさと柔軟性のおかげで、このプロセスは楽しくなりました。私は、この強力なフレームワークを使って他に何を構築できるかを引き続き探索していきたいと思っています。

Vue.js に飛び込むことを検討している場合は、天気予報アプリのような小さなプロジェクトから始めることを強くお勧めします。実際に使える具体的なものを構築しながら、基本を学ぶのに最適な方法です。

#Vue を学びながら、すぐに構築する次のプロジェクトに注目してください。コーディングを楽しんでください!

以上がVue の学習パート天気アプリの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。