Vue.js позволяет легко управлять классами и стилями элементов с помощью директив v\-bind:class и v\-bind:style.

Динамические классы:

Объектный синтаксис:

```

```

data() { return { isActive: true, isBold: false }; }

Массивный синтаксис:

```

```

data() { return { classA: 'active', classB: 'text\-bold' }; }

Динамические стили:

```

```

data() { return { activeColor: 'red', fontSize: 14 }; }

Пример с вычисляемым свойством:

```

```

computed: { computedClass() { return this.isActive ? 'active' : 'inactive'; } }

В следующем посте решим квиз с Array.prototype.reduce()?

Подписывайся на @frontendino

Делегирование событий позволяет обрабатывать события на множестве элементов через одного общего родителя. Это особенно полезно, когда элементы создаются динамически.

Пример HTML:

```

• Элемент 1
• Элемент 2
• Элемент 3

```

Добавление обработчика на родительский элемент:

const itemList = document.getElementById('itemList'); itemList.addEventListener('click', function(event) { if (event.target && event.target.nodeName === 'LI') { console.log('Вы кликнули по', event.target.textContent); } });

Преимущества:
Производительность: Меньше обработчиков событий в памяти.
Динамичность: Работает с элементами, добавленными после установки обработчика.

В следующем посте рассмотрим в Vue.js использовать динамические классы
Подписывайся на @frontendino

📝 Решение задачи

Правильные варианты были в комментарии, давайте разберем подробнее:

Что будет выведено в консоль и в чем заключается ошибка?
— Переменная i объявлена с помощью var, поэтому у нее функциональная область видимости.
— К моменту выполнения функций setTimeout, цикл for уже завершится, и значение i станет 6.
— В результате, в консоль 5 раз выведется число 6.
Как исправить код, чтобы он выводил числа от 1 до 5 с задержкой в 1 секунду между выводами?
Используем let для объявления переменной i, чтобы у нее была блочная область видимости.

for (let i = 1; i <= 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); }

Теперь вывод будет:

1 2 3 4 5

Альтернативный вариант:

Можно создать новое лексическое окружение для каждой итерации с помощью немедленно вызываемой функции (IIFE).

for (var i = 1; i <= 5; i++) { (function(i) { setTimeout(function() { console.log(i); }, i * 1000); })(i); }

Подписывайся на @frontendino

Делегирование событий позволяет управлять событиями множества элементов через общего родителя, что повышает производительность.

```

• Главная
• О нас
• Контакты

```

document.getElementById('menu').addEventListener('click', (event) => { if (event.target.tagName === 'LI') { console.log(`Вы выбрали: ${event.target.textContent}`); } });

Теперь вам не нужно назначать обработчик на каждый li отдельно.

В следующем посте решим задачу по JavaScript
Подписывайся на @frontendino

Свойство aspect-ratio упрощает создание элементов с определенным соотношением сторон без необходимости использовать "пэддинговые" трюки.

.div\-square { width: 100%; aspect\-ratio: 1 / 1; /* Квадрат */ background\-color: lightcoral; } .div\-rectangle { width: 100%; aspect\-ratio: 16 / 9; /* Прямоугольник */ background\-color: lightseagreen; }

Это особенно полезно при создании адаптивных видео или изображений.

В следующем посте посмотрим как использовать Intersection Observer для создания бесконечной прокрутки
Подписывайся на @frontendino

Intersection Observer позволяет отслеживать видимость элементов на странице и загружать контент по мере необходимости.

const sentinel = document.querySelector('\#sentinel'); const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { loadMoreItems(); } }); observer.observe(sentinel);

Элемент с id sentinel служит триггером для загрузки новых данных, когда пользователь до него докручивает.

В следующем посте изучим как работает Event Delegation в JavaScript
Подписывайся на @frontendino

Flexbox предоставляет гибкий способ создания адаптивных макетов. Свойства flex\-grow и flex\-shrink контролируют, как элементы растут или сжимаются в пределах контейнера.

Пример:

.container { display: flex; } .item1 { flex\-grow: 1; background\-color: \#f0f0f0; } .item2 { flex\-grow: 2; background\-color: \#ccc; }

В этом примере второй элемент займет в два раза больше пространства, чем первый, благодаря значению flex\-grow: 2.

В следующем посте: узнаем, как работать с localStorage и sessionStorage для сохранения пользовательских настроек.
Подписывайся на @frontendino

Webpack — это инструмент для сборки модулей, который позволяет создать универсальную конфигурацию для разработки и продакшена.

Пример настройки Webpack:

Установка:

npm install \-\-save\-dev webpack webpack\-cli

Конфигурация для разработки:

module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: \_\_dirname + '/dist' }, devtool: 'inline\-source\-map', };

Конфигурация для продакшена:

module.exports = { mode: 'production', entry: './src/index.js', output: { filename: 'bundle.min.js', path: \_\_dirname + '/dist' }, optimization: { minimize: true } };

Теперь Webpack автоматически сжимает и оптимизирует ваш код для продакшена.

В следующем посте: разберем примеры использования flex-grow и flex-shrink для управления элементами в Flexbox.
Подписывайся на @frontendino

Полифилы — это скрипты, которые позволяют использовать современные веб-API в старых браузерах, которые их не поддерживают.

Пример использования polyfill.io:

```

```

Этот скрипт загружает необходимые полифилы, основываясь на браузере пользователя. Это позволяет использовать такие функции, как fetch, Promise, и другие современные API, даже если браузер не поддерживает их нативно.

В следующем посте рассмотрим настройку конфигурации Webpack для разработки и продакшена.
Подписывайся на @frontendino

📌 Какой результат вернет этот код?

const numbers = [1, 2, 3, 4]; const result = numbers.map(num => { if (num > 2) return; return num; }); console.log(result);

1. [1, 2, undefined, undefined]
2. [1, 2, 3, 4]
3. [1, 2]
4. Ошибка

Пишите свой вариант в комментариях. Ответ с объяснением опубликуем завтра утром.

В следующем посте узнаем, как использовать CSS Variables для создания тем оформления сайта.
Делитесь этим постом с друзьями.
Ещё больше о фронтенде, — на @frontendino