Трюк в TypeScript: заставить компилятор разрешать только один из вариантов, но не оба одновременно.
Идеально подходит для фильтров, форм и конфигурационных переключателей
👉 Гайды по JavaScript | дать буст
Идеально подходит для фильтров, форм и конфигурационных переключателей
Please open Telegram to view this post
VIEW IN TELEGRAM
Совет дня: используйте 2 тега
В компонентах Vue в формате Single File можно использовать два блока
Одна из них — экспорт типов или данных, которые жёстко связаны с компонентом, но могут понадобиться и в других частях приложения.
Другая — экспорт ключей для
👉 Гайды по JavaScript | дать буст
<script> в компонентах Single FileВ компонентах Vue в формате Single File можно использовать два блока
<script>: один с атрибутом setup, другой — без него. Это может быть полезно по нескольким причинам.Одна из них — экспорт типов или данных, которые жёстко связаны с компонентом, но могут понадобиться и в других частях приложения.
Другая — экспорт ключей для
provide/inject в случае тесно связанных между собой компонентов.Please open Telegram to view this post
VIEW IN TELEGRAM
Совет по JavaScript
Используйте
👉 Гайды по JavaScript | дать буст
Используйте
navigator.maxTouchPoints, чтобы определить, поддерживает ли устройство сенсорный ввод.Please open Telegram to view this post
VIEW IN TELEGRAM
Фишка для Vue Router
Автоматическая генерация маршрутов с помощью
👉 Гайды по JavaScript | дать буст
Автоматическая генерация маршрутов с помощью
unplugin-vue-routerPlease open Telegram to view this post
VIEW IN TELEGRAM
Глубокое клонирование в JavaScript? Просто используйте встроенный
Смотрите, как это работает.
👉 Гайды по JavaScript | дать буст
structuredClone().Смотрите, как это работает.
Please open Telegram to view this post
VIEW IN TELEGRAM
Для JavaScript, Node.js, React, React Native и Next.js,
❯ Node.js
https://youtube.com/playlist?list=PLC3y8-rFHvwh8shCMHFA5kWxD9PaPwxaY
❯ Краткий курс JavaScript
https://youtube.com/watch?v=XIOLqoPHCJ4
❯ Полный курс Next.js 15
https://youtube.com/watch?v=k7o9R6eaSes
❯ React
https://youtube.com/playlist?list=PLC3y8-rFHvwi1AXijGTKM0BKtHzVC-LSK
❯ React Native
https://youtube.com/playlist?list=PLC3y8-rFHvwhiQJD1di4eRVN30WWCXkg1
❯ Expo Router
https://youtube.com/playlist?list=PLC3y8-rFHvwgVmqbtQkPDxkvDf6w5_eGA
❯ Расширенный краш-курс JavaScript
https://youtube.com/watch?v=R9I85RhI7Cg
👉 Гайды по JavaScript | дать буст
❯ Node.js
https://youtube.com/playlist?list=PLC3y8-rFHvwh8shCMHFA5kWxD9PaPwxaY
❯ Краткий курс JavaScript
https://youtube.com/watch?v=XIOLqoPHCJ4
❯ Полный курс Next.js 15
https://youtube.com/watch?v=k7o9R6eaSes
❯ React
https://youtube.com/playlist?list=PLC3y8-rFHvwi1AXijGTKM0BKtHzVC-LSK
❯ React Native
https://youtube.com/playlist?list=PLC3y8-rFHvwhiQJD1di4eRVN30WWCXkg1
❯ Expo Router
https://youtube.com/playlist?list=PLC3y8-rFHvwgVmqbtQkPDxkvDf6w5_eGA
❯ Расширенный краш-курс JavaScript
https://youtube.com/watch?v=R9I85RhI7Cg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Поговорим про обновление CSS-переменных в Vue.js:
Vue.js построен вокруг реактивности, что делает его отличным выбором для динамического обновления CSS-переменных. В Vue ты можешь легко встроить такую логику в жизненный цикл компонента или привязать её к вычисляемому свойству (computed), чтобы обновления происходили автоматически.
Вот пример, который показывает, как обновить CSS-переменную внутри компонента Vue:
в этом примере по клику на кнопку вызывается метод changeColor, который обновляет CSS-переменную --main-color.
👉 Гайды по JavaScript | дать буст
Vue.js построен вокруг реактивности, что делает его отличным выбором для динамического обновления CSS-переменных. В Vue ты можешь легко встроить такую логику в жизненный цикл компонента или привязать её к вычисляемому свойству (computed), чтобы обновления происходили автоматически.
Вот пример, который показывает, как обновить CSS-переменную внутри компонента Vue:
в этом примере по клику на кнопку вызывается метод changeColor, который обновляет CSS-переменную --main-color.
Please open Telegram to view this post
VIEW IN TELEGRAM
Совет дня:
Иногда данные на клиенте могут отличаться от данных на сервере. В таких случаях можно игнорировать предупреждения о несоответствии при гидрации с помощью атрибута
(Доступно начиная с версии v3.5)
👉 Гайды по JavaScript | дать буст
Иногда данные на клиенте могут отличаться от данных на сервере. В таких случаях можно игнорировать предупреждения о несоответствии при гидрации с помощью атрибута
data-allow-mismatch(Доступно начиная с версии v3.5)
Please open Telegram to view this post
VIEW IN TELEGRAM
Laravel + Vue = Магия
Посмотри, как легко реализовать обновления в реальном времени с Reverb — встроенным решением от Laravel для WebSocket-ов
👉 Гайды по JavaScript | дать буст
Посмотри, как легко реализовать обновления в реальном времени с Reverb — встроенным решением от Laravel для WebSocket-ов
Please open Telegram to view this post
VIEW IN TELEGRAM
JavaScript — асинхронный язык: он умеет обрабатывать несколько операций одновременно, не блокируя главный поток.
Существует два основных способа работы с асинхронностью в JS: promises и async/await.
В этом туториале Генри объясняет, как работает каждый из подходов и в каких случаях стоит использовать тот или иной.
https://freecodecamp.org/news/when-to-use-asyncawait-vs-promises-in-javascript/
👉 Гайды по JavaScript | дать буст
Существует два основных способа работы с асинхронностью в JS: promises и async/await.
В этом туториале Генри объясняет, как работает каждый из подходов и в каких случаях стоит использовать тот или иной.
https://freecodecamp.org/news/when-to-use-asyncawait-vs-promises-in-javascript/
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Знаешь, как работает
✅ defineExpose() делает свойства доступными через template ref компонента, а не через определение компонента, импортированное из .vue-файла.
✅ При использовании
Вместо этого эти свойства становятся доступными на экземпляре компонента, когда ты получаешь его через
👉 Гайды по JavaScript | дать буст
defineExpose() в контексте доступа к компоненту? defineExpose() экспортируемые свойства не добавляются к самому определению компонента (т.е. к объекту, который ты получаешь при импорте компонента в JavaScript).Вместо этого эти свойства становятся доступными на экземпляре компонента, когда ты получаешь его через
useTemplateRef()Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Давай поговорим об использовании watch во Vue для реактивных обновлений:
• Во Vue.js можно использовать API watch, чтобы реактивно обновлять CSS-переменные при изменении данных. Это особенно полезно, если состояние приложения должно динамически управлять стилями — например, при переключении темы.
• Изображение 1: допустим, у нас есть CSS-переменная
• Изображение 2: улучшенный вариант с использованием Composition API Vue.js через
Каждый раз, когда переменная
👉 Гайды по JavaScript | дать буст
• Во Vue.js можно использовать API watch, чтобы реактивно обновлять CSS-переменные при изменении данных. Это особенно полезно, если состояние приложения должно динамически управлять стилями — например, при переключении темы.
• Изображение 1: допустим, у нас есть CSS-переменная
--main-color в :root, и мы используем её для установки цвета body.• Изображение 2: улучшенный вариант с использованием Composition API Vue.js через
script setup и watch.Каждый раз, когда переменная
isDarkTheme меняется, срабатывает функция watch, которая обновляет CSS-переменную --main-color. Такой подход особенно удобен, когда тема или другие стили должны динамически меняться в зависимости от состояния приложения.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Чистый приём в JavaScript: деструктуризация с псевдонимами и значениями по умолчанию
👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Отображать пользовательские уведомления с Nuxt UI — проще простого благодаря
А ты уже пробовал?
👉 Гайды по JavaScript | дать буст
useToastА ты уже пробовал?
Please open Telegram to view this post
VIEW IN TELEGRAM