Belajar Bahagian Vue Membina apl cuaca

Menyelam ke dalam Vue.js adalah seperti menemui alat kegemaran baharu dalam kit DIY—intuitif, fleksibel dan sangat berkuasa. Projek sampingan pertama saya untuk mengotorkan tangan saya dengan Vue ialah apl cuaca, dan ia banyak mengajar saya tentang keupayaan rangka kerja itu, serta tentang pembangunan web secara umum. Inilah yang saya pelajari setakat ini.

1. Bermula dengan Vue: Kesederhanaan Memenuhi Kuasa

Salah satu perkara pertama yang menarik perhatian saya tentang Vue.js ialah betapa mudahnya untuk bangun dan berlari. Tidak seperti beberapa rangka kerja lain yang memerlukan banyak persediaan dan konfigurasi, Vue adalah sangat mudah. Apa yang saya perlukan hanyalah tag skrip untuk memasukkan Vue, dan saya pergi ke perlumbaan.

Dalam apl cuaca saya, saya menggunakan fungsi createApp Vue untuk memulakan aplikasi saya:

const { createApp, ref } = Vue;

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

Pendekatan ini bersih dan menyimpan segala-galanya di satu tempat, menjadikannya lebih mudah untuk mengurus keadaan dan logik aplikasi.

2. Pengikatan Data Reaktif: Keajaiban ref

Sistem kereaktifan Vue ialah salah satu ciri yang menonjol. Dengan menggunakan ref, saya dapat menjadikan data saya reaktif, bermakna sebarang perubahan pada data mengemas kini DOM secara automatik. Sebagai contoh, apabila pengguna menyerahkan lokasi, data cuaca diambil dan dipaparkan tanpa sebarang manipulasi DOM manual:

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");
    }
};

Kemas kini lancar UI berdasarkan perubahan dalam data adalah sesuatu yang menjadikan Vue.js sangat berkuasa untuk membina aplikasi interaktif.

3. Rendering Bersyarat: Tunjukkan Apa Yang Diperlukan Sahaja

Arahan Vue seperti v-if dan v-else memudahkan untuk memaparkan elemen secara bersyarat berdasarkan keadaan data anda. Dalam apl cuaca saya, saya menggunakan arahan ini untuk memaparkan data cuaca hanya apabila ia tersedia:

<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>

Perenderan bersyarat jenis ini memastikan apl kekal bersih dan bermaklumat, hanya menunjukkan kepada pengguna perkara yang mereka perlu lihat apabila mereka perlu melihatnya.

4. Mengendalikan Input Pengguna: Kuasa model v

Mengendalikan input pengguna dalam Vue.js adalah mudah dengan arahan model v. Dalam apl saya, saya menggunakan v-model untuk mengikat medan input terus ke pembolehubah locationValue saya, menjadikannya reaktif dan memastikan data selari dengan input pengguna:

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

Pengikatan mudah ini menghapuskan keperluan untuk pendengar acara manual, mengurangkan kod boilerplate dan menjadikan aplikasi lebih mudah diselenggara.

5. Memecahkan Data Cuaca: Berulang dengan v-for

Memaparkan berbilang keping data, seperti ramalan cuaca setiap jam atau masa hadapan, dipermudahkan dengan arahan v-for Vue. Ini membolehkan saya mengulang tatasusunan data dan menjadikannya secara dinamik:

<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>

Ini memudahkan untuk mencipta UI yang fleksibel dan responsif yang boleh memaparkan bilangan titik data yang berbeza-beza, bergantung pada lokasi pengguna dan masa dalam hari.

6. Pengendalian Ralat: Jangan Lupa Tangkap Pengecualian Itu

Bekerja dengan API sentiasa disertai dengan kemungkinan ralat, sama ada isu rangkaian atau lokasi yang tidak sah. Vue memudahkan untuk mengendalikan ralat ini dengan anggun, memastikan apl tidak ranap dan terbakar apabila berlaku masalah:

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

Ini membantu saya memahami kepentingan pengendalian ralat dalam membuat aplikasi teguh yang boleh menangani situasi yang tidak dijangka.

Membungkus

Membina apl cuaca ini dengan Vue.js telah menjadi pengalaman yang mencerahkan. Saya telah belajar banyak tentang cara menstruktur aplikasi dan mencipta UI responsif yang mengemas kini dalam masa nyata berdasarkan input pengguna. Kesederhanaan dan fleksibiliti Vue telah menjadikan proses ini menyeronokkan, dan saya teruja untuk terus meneroka perkara lain yang boleh saya bina dengan rangka kerja yang berkuasa ini.

Jika anda mempertimbangkan untuk menyelam ke dalam Vue.js, saya amat mengesyorkan bermula dengan projek kecil seperti apl cuaca. Ini cara yang bagus untuk mempelajari asas-asas sambil membina sesuatu yang nyata yang sebenarnya boleh anda gunakan.

Nantikan projek seterusnya yang akan saya bina tidak lama lagi sambil belajar #Vue. Selamat mengekod!

Atas ialah kandungan terperinci Belajar Bahagian Vue Membina apl cuaca. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!