Создадим приложение для отображения погодных данных по заданному городу с использованием Vue.js и внешнего API. Проект будет создаваться поэтапно.
Начало работы: Подключение CSS и базовые стили
Создадим файл main.css в папке assets с базовыми стилями: нулевые отступы и поля для всех элементов (margin: 0; padding: 0;), ширину и минимальную высоту для тега <body> (100%), и красный цвет фона. Подключим файл к проекту в main.js:
import './assets/main.css'Заменим красный фон на градиент (например, с сайта CSS Gradient). Добавим стили Flexbox: display: flex; justify-content: center; align-items: center; для центрирования элементов внутри <body>.
Создание основного компонента
В app.vue создадим основной компонент: <div> с классом wrapper, содержащий заголовок <h1>Погодное приложение</h1> и абзац <p>Узнать погоду в вашем городе</p>. Стилю wrapper зададим ширину 900px, высоту 500px, скругленные углы (border-radius: 50px), фоновый цвет, внутренние отступы (padding: 20px;), центрирование заголовка и белый цвет текста для него. Добавим отступ сверху для абзаца (margin-top: 20px).
<template>
<div class="wrapper">
<h1>Погодное приложение</h1>
<p>Узнать погоду в вашем городе</p>
</div>
</template>
<style scoped>
.wrapper {
width: 900px;
height: 500px;
border-radius: 50px;
background: /* ваш градиент */;
padding: 20px;
}
h1 {
text-align: center;
color: white;
margin-top: 50px;
}
p {
margin-top: 20px;
}
</style>
Добавление инпута, кнопки и обработчиков событий
Добавим <input type=»text»> для ввода города, кнопку <button>Получить погоду</button> и обработчики событий. Стилю <input> добавим отступ сверху, прозрачный фон, обводку снизу, цвет и размер текста, а также стили focus. Кнопке добавим стили, включая эффект наведения курсора.
<template>
<div class="wrapper">
<h1>Погодное приложение</h1>
<input type="text" v-model="city">
<button @click="getWeather">Получить погоду</button>
<p v-if="city">Узнать погоду в "{{ cityName }}"</p>
<p v-else>Узнать погоду в вашем городе</p>
<p class="error" v-if="error">{{ error }}</p>
<div v-if="info">
<p>Температура: {{ showTemperature }}</p>
<p>Ощущается как: {{ showFeelsLike }}</p>
<p>Мин. температура: {{ showMinTemp }}</p>
<p>Макс. температура: {{ showMaxTemp }}</p>
</div>
</div>
</template>
Работа с данными и computed свойства
В секции <script> используем data(), methods и computed свойства Vue.js. data() содержит переменные: city, error и info. methods содержит метод getWeather для получения данных с API. computed свойства cityName, showTemperature, showFeelsLike, showMinTemp, showMaxTemp обрабатывают и форматируют данные о погоде.
<script>
import axios from 'axios';
export default {
data() {
return {
city: '',
error: '',
info: null,
};
},
computed: {
cityName() {
return '"' + this.city.trim() + '"';
},
showTemperature() {
return this.info ? this.info.main.temp : '';
},
showFeelsLike() {
return this.info ? this.info.main.feels_like : '';
},
showMinTemp() {
return this.info ? this.info.main.temp_min : '';
},
showMaxTemp() {
return this.info ? this.info.main.temp_max : '';
},
},
methods: {
getWeather() {
this.error = '';
const trimmedCity = this.city.trim();
if (trimmedCity.length < 2) {
this.error = 'Название города должно быть больше одного символа';
return false;
}
axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${trimmedCity}&appid=YOUR_API_KEY&units=metric`)
.then(response => {
this.info = response.data;
})
.catch(error => {
this.error = 'Ошибка при получении данных';
});
},
},
};
</script>
Замените YOUR_API_KEY на ваш собственный API ключ от OpenWeatherMap.
Создано функциональное приложение для получения и отображения данных о погоде, используя Vue.js и внешний API. Рассмотрена работа с данными, обработка событий, стилизация и использование computed свойств. Пример демонстрирует возможности Vue.js в разработке интерактивных веб-приложений.