- 72
- 12 119
Дамир | Платформа EXPAND
Ukraine
เข้าร่วมเมื่อ 16 พ.ย. 2022
Платформа EXPAND - платформа для саморазвития.
Люди приходят сюда, чтобы учиться программировать на JavaScript и Python, создавать и продвигать сайты (конструкторы сайтов, SEO), заняться маркетингом своих проектов (advertising and marketing).
Ну и чтобы лучше понять себя, конечно же!
Для этого я пишу в телеграм-группу материалы по психологии, философи, самопознанию и мудрости жизни.
Люди приходят сюда, чтобы учиться программировать на JavaScript и Python, создавать и продвигать сайты (конструкторы сайтов, SEO), заняться маркетингом своих проектов (advertising and marketing).
Ну и чтобы лучше понять себя, конечно же!
Для этого я пишу в телеграм-группу материалы по психологии, философи, самопознанию и мудрости жизни.
ВЕСЬ VueJS 3 за 60 минут: курс с полного нуля (20 уроков)
00:00 0. Как будет построен курс?
01:08 1. Установка Vue за 60 секунд
02:10 2. Структура проекта Vue 3
10:10 3. Синтаксис Composition API
12:33 4. Вывод JS на страницу: {{ template syntax }}
16:33 5. ref: реактивные переменные
19:20 6. Удаляем querySelector'ы: onMounted
22:20 7. v-on: клики и события
26:03 8. v-bind: привязка JS к атрибутам
32:17 9. v-model: магия с инпутами
34:35 10. v-if и v-else
35:55 11. v-for: циклы и никакого HTML!
39:26 12. Препроцессоры SCSS / SASS / TypeScript
40:27 13. Компоненты и их польза
41:20 14. Слоты компонентов
42:32 15. Именные слоты: named slots
43:25 16. Props: кастомизация компонентов
45:45 17. v-on: события на компонентах
48:15 18. emits: сигналы
51:07 19. Computed за 60 секунд
52:36 20. watch за 60 секунд
55:05 21. provide-inject и никаких пропсов
56:47 22. Выбери проект себе по душе!
01:08 1. Установка Vue за 60 секунд
02:10 2. Структура проекта Vue 3
10:10 3. Синтаксис Composition API
12:33 4. Вывод JS на страницу: {{ template syntax }}
16:33 5. ref: реактивные переменные
19:20 6. Удаляем querySelector'ы: onMounted
22:20 7. v-on: клики и события
26:03 8. v-bind: привязка JS к атрибутам
32:17 9. v-model: магия с инпутами
34:35 10. v-if и v-else
35:55 11. v-for: циклы и никакого HTML!
39:26 12. Препроцессоры SCSS / SASS / TypeScript
40:27 13. Компоненты и их польза
41:20 14. Слоты компонентов
42:32 15. Именные слоты: named slots
43:25 16. Props: кастомизация компонентов
45:45 17. v-on: события на компонентах
48:15 18. emits: сигналы
51:07 19. Computed за 60 секунд
52:36 20. watch за 60 секунд
55:05 21. provide-inject и никаких пропсов
56:47 22. Выбери проект себе по душе!
มุมมอง: 347
วีดีโอ
21. Никаких пропсов: provide-inject для вложенных компонентов на Vue 3
มุมมอง 2814 วันที่ผ่านมา
00:00 Когда применять provide / inject на Vue 3 00:30 Синтаксис provide / inject
20. Как работает watch: простое объяснение (yes / no API) на проектах Vue
มุมมอง 4614 วันที่ผ่านมา
00:00 Пример yes/no API 01:45 Немного о yes/no API
19. Computed за 60 секунд: когда применять computed на проектах VueJS?
มุมมอง 2814 วันที่ผ่านมา
00:00 Computed за 60 секунд: объяснение
18. Отправляем сигналы: emits во Vue 3 (эмиты на Vue)
มุมมอง 5114 วันที่ผ่านมา
00:00 Как писать emits 00:50 emits через JS 01:35 Приёмник сигнала: обработчик @ 02:05 Краткое резюме: emits за 60 секунд
17. И так тоже можно: события v-on на компонентах (component events Vue 3)
มุมมอง 1614 วันที่ผ่านมา
00:00 Как вешать клик на компонент Vue 00:35 Результат в деталях 01:34 События на компонентах в цикле v-for
16. И так можно, и эдак: как props кастомизируют компоненты (props на Vue 3)
มุมมอง 3414 วันที่ผ่านมา
00:00 Зачем нужны пропсы (props)? 00:42 Как писать пропс в компоненте 01:25 Пропсы и циклы: используем v-bind
15. Ячейки для HTML: именные слоты во Vue 3
มุมมอง 2114 วันที่ผ่านมา
00:00 Как работают именные слоты
14. Снаружи внутрь: слоты компонентов (component slots Vue 3)
มุมมอง 2114 วันที่ผ่านมา
00:00 Как использовать слоты компонентов на Vue 3
13. Торт на кусочки: компоненты во Vue 3 (и их польза на проектах)
มุมมอง 2914 วันที่ผ่านมา
00:00 Компоненты Vue 3: как подключить?
12. Добавляем SCSS / SASS / TypeScript (установка препроцессоров на проект Vue 3)
มุมมอง 2314 วันที่ผ่านมา
00:00 Одна минута - и всё готово 00:40 Стоит ли использовать PUG?
11. Никакого HTML! v-for для циклов (а также key и index) на Vue 3
มุมมอง 3614 วันที่ผ่านมา
00:00 v-for - средство против HTML'я 00:30 Синтаксис v-for 01:18 Когда применять v-for: примеры 02:05 key в цикле v-for 02:48 index в цикле v-for Но ведь видео - ещё не все! Продолжай бесплатное обучение на платформе для программистов EXPAND ❍: bit.ly/expand-platform Обучение JavaScript, Vue, Python
10. ДВЕ шапки вместо одной: v-if и v-else во Vue 3
มุมมอง 2614 วันที่ผ่านมา
00:00 v-if 00:55 v-else Но ведь видео - ещё не все! Продолжай бесплатное обучение на платформе для программистов EXPAND ❍: bit.ly/expand-platform Обучение JavaScript, Vue, Python
9. Магия с инпутами: v-model на Vue 3
มุมมอง 3114 วันที่ผ่านมา
00:00 Друзья, это - магия (синтаксис v-model) 00:50 Аналогичный код в JS 01:20 v-model с textarea, select, checkbox, radiobuttons 01:50 Задание: проверка имейла Но ведь видео - ещё не все! Продолжай бесплатное обучение на платформе для программистов EXPAND ❍: bit.ly/expand-platform Обучение JavaScript, Vue, Python
8. БДСМ-связывание: v-bind и привязка JS к атрибутам (и их польза на проекте Vue 3)
มุมมอง 4714 วันที่ผ่านมา
8. БДСМ-связывание: v-bind и привязка JS к атрибутам (и их польза на проекте Vue 3)
7. ИЗИ КЛИКИ: v-on и события на Vue 3 (пример на onclick и event.target)
มุมมอง 6214 วันที่ผ่านมา
7. ИЗИ КЛИКИ: v-on и события на Vue 3 (пример на onclick и event.target)
6. Жизнь БЕЗ querySelector'ов: хук onMounted во Vue 3
มุมมอง 6014 วันที่ผ่านมา
6. Жизнь БЕЗ querySelector'ов: хук onMounted во Vue 3
5. Vue, обновись! REF и реактивные переменные (и разница с обычными переменными) во Vue 3
มุมมอง 5914 วันที่ผ่านมา
5. Vue, обновись! REF и реактивные переменные (и разница с обычными переменными) во Vue 3
4. Лёгкий вывод JS на страницу: {{ template syntax }} во Vue 3
มุมมอง 6814 วันที่ผ่านมา
4. Лёгкий вывод JS на страницу: {{ template syntax }} во Vue 3
3. Божественный синтаксис: Composition API vs Options API во Vue 3
มุมมอง 9021 วันที่ผ่านมา
3. Божественный синтаксис: Composition API vs Options API во Vue 3
2. Что за файлики: структура проекта на Vue 3
มุมมอง 10421 วันที่ผ่านมา
2. Что за файлики: структура проекта на Vue 3
Vue 3 на простых примерах: курс для начинающих
มุมมอง 7328 วันที่ผ่านมา
Vue 3 на простых примерах: курс для начинающих
Самый ПОНЯТНЫЙ обзор REST API на Python на простых примерах
มุมมอง 141หลายเดือนก่อน
Самый ПОНЯТНЫЙ обзор REST API на Python на простых примерах
Свой API на Flask (Python). Большой выпуск
มุมมอง 1.1Kหลายเดือนก่อน
Свой API на Flask (Python). Большой выпуск
Fetch за 15 строчек кода и 10 минут работы. Азы работы с API в JavaScript
มุมมอง 2.2Kหลายเดือนก่อน
Fetch за 15 строчек кода и 10 минут работы. Азы работы с API в JavaScript
4. Как работать с MongoDB через Python (pymongo): чтение, запись, обновление, удаление (CRUD)
มุมมอง 32หลายเดือนก่อน
4. Как работать с MongoDB через Python (pymongo): чтение, запись, обновление, удаление (CRUD)
3. Плагин MongoDB для VS Code: как пользоваться и чем он полезен?
มุมมอง 21หลายเดือนก่อน
3. Плагин MongoDB для VS Code: как пользоваться и чем он полезен?
1. MongoDB на Python с нуля: введение. Экосистема MongoDB
มุมมอง 75หลายเดือนก่อน
1. MongoDB на Python с нуля: введение. Экосистема MongoDB
Все очень круто, если у тебя уже есть какая-то база vuejs. Я месяц как изучаю vuejs и все очень круто ложится на уже имеющиеся знания. Если это видео первое по vuejs, сомневаюсь, что что-то будет понятно. Спасибо, полезно.
Хех, спасибо Рассчитано на новичков, конечно же, но с минимальными умениями рыться в доках + немножечко знать инглиш Vue вообще предназначен для тех, кому чистый JS уже порядком поднадоел и кто хочет сделать качественный шаг вперёд Хотя я не думал, что если человек придет с нуля, то ничего не поймет Звучит грустно, не знаю, куда уже проще и подробнее объяснять, так что ты меня больше расстроил, чем похвалил (
@@expand_platform Не воспринимай мой комментарий так и не расстраивайся. Это лишь мое мнение и то, как мне зашло это видео. Ты делаешь полезный контент. Так что продолжай 👌
Спасибо за хорошую и интересную подачу материала, все более чем понятно, хоть я и проходила курсы и там мы поверхностно изучали Vue, по Вашим урокам я усвоила материал намного лучше!)
Спасибо и вам за обратную связь! Стараюсь делать уроки коротко и по делу 💪
Некорректно говорить где выигрывает Vue или JavaScript. Это все JavaScript. Просто есть ванильный такое понятие. Лучше об этом упоминать потому что неокрепшие мозги в этом поймут неправильно и будут выдавать «шедевры»
Но ведь грань правда очень тонкая. Более того, в чистом JS и близко нет тех возможностей, что даёт Вью Это как сказать, что Sass - это же CSS. По факту же ровно наоборот: CSS - лишь часть того, что даёт нам Sass.
@@expand_platform Ну как сказать нет? После компиляции кода это обычные js чанки. Все это возможности самого языка. Vue это еще один слой абстракции, который как раз таки не заставляет нас погружаться в те низкоуровневые детали. Но все что происходит под капотом вью после компиляции это обычный ванильный код. Тут же ведь мы еще не говорим о TS )) который по факту просто декоративный язык позволяющий комфортно разрабатывать используя мощные механизмы типизированных языков но после компиляции - ванильный js. Поэтому лучше говорить что фреймворк коим является Vue позволяет решать те задачи гораздо эффективнее и быстрее чем если бы писали такой же функционал на голом js. Еще помню как некоторые сравнивали jquery и javascript😁 и что учить первым) поэтому молодым лучше максимально все разжевывать
@@expand_platform Sass это тоже абстракция. Да это тоже все CSS, ты должен мыслить тем что ты имеешь на выходе. Sass тоже придумали чтобы облегчить разработку. Но все равно стили со языком программирования неправильно сравнивать. У css есть ограничения которых нет в sass. А на чистом js ты можешь написать все тоже самое что писал бы на Vue, создавать свои эвристики, алгоритмы для эффективной манипуляцией dom и тд. Ту же реактивность можно свою создать взять за основу ProxyAPI и пилить свои функции поверх наподобие ref, reactive
@@eg0ist_665 Все верно Уверен, мы однозначно друг друга поняли, просто говорим об одном и том же разными словами Vue - не отдельный язык, лишь инструмент в руках Javascript-разработчика. Как и Sass - тоже инструмент
@@expand_platform поддерживаю)
Живу без защиты, уже 15 лет. Хожу только по проверенным источникам, в письмах ничего не нажимаю, всякую хрень ге качаю😂 15 лет полет нормальный 😅
Ответ, которого я ждал. Так и надо ⚡
А что tсли взять и посмотреть транскрипцию и произношение слова route )))
Рут или раут. Оба варианта правильные (чат GPT)
@@expand_platform роут Чат GPT довольно кривой на самом деле
a зачем в 'let data' снова использовать 'await', там же только преобразовать надо? let data = response.json() тоже работает
Работает, но прилетает Promise, т.к. данные преобразовываются не сразу Поскольку я не хочу работать с промисами, я делаю await.
@@expand_platform спасибо!
@@expand_platform щас пытаюсь понять данную тему, она сопротивляется мне
Я верю, ты разберёшься!
По интонации на первых секунда понял что ты прочувствовал всю эту боль, и кто понятным языком все объяснит на пальцах, спасибо дружище!!!
Да, и это была не наигранная интонация! Спасибо и тебе огромное за поддержку 👍
Для новичков всё достаточно подробно и простыми словами, спасибо огромное, очень полезный видос)
Спасибо за доброе слово! Боялся, что плохо объяснил, зачем нужны асинхронные функции
Брат, так ты из Украины, я смотрю твои видосы по Вью, и думал ты россиянец😂😂, видосы можно и на украинском снимать, а кто не знает пусть учит 😂
😁💪
👍
А я подключил в файле конфигурации Vite css: { preprocessorOptions: { scss: { additionalData: `@import "@/assets/styles.scss";`, }, }, }, В styles.scss же у меня все глобальные переменные и стили. Так же в него импортированы файлы других стилей. Например, normalize.scss. Но при таком подходе, нужно что-бы другие файлы (например тот-же файл нормализации стилей), был создан с префиксом - одно нижнее подчеркивание. Т.е. _normalize.scss. Это нужно что-бы в конечный файл css не дублировались стили. Только самая главная страница должна быть без нижнего подчеркивания, в моем случае styles.scss. Как тебе такой способ?
Отличный способ, я бы сказал, это способ для ленивых😁 Я точно одобряю Вайт (Вит) вообще много чего умеет интересного, такого, чего бедному Вебпаку и не снилось
Благодарю!
Благодарю! Класс!
Очередная благодарность за очень полезные видео!
Спасибо за доброе слово! Стараюсь ведь именно для вас😎
Очень доходчиво и практично. Благодарю!
Класс! Классные видео!
Для чего используете в 5-й строке await?
await говорит коду, что мол, дождись, пока код справа от await выполнится, а потом уже делай то, что слева. То есть сначала мы обрабатываем наш ответ, который пришёл с Api, делаем его обычным объектом. А затем мы уже этот объект записываем в переменную data
Я думаю надо всегда держать в уме быстродействие функции,типа если ты понимаешт,что это может быть длительный процесс то ставишь
Чтобы не поймать Промис, который очень хочет появиться в том месте и своим присутствием немного увеличить время, которые мы потратим на нажатие клавиш😁
Я watch когда изучал, то прикрутил его в туду лист, следил за массивом туду, и когда он изменялся (добавлял или удалял запись) то сохранял массив в локалсторедж. Очень удобно получилось
Да, watch - вообще вещь знатная, простая и удобная⭐ И, главное - решает проблему
Отличная подача материала! Все четко и доходчиво!
Классное объяснение!
Благодарю за очередное классное видео!
Спасибо за урок
И тебе спасибо, что оставил отзыв! Рад стараться для других😎
Огромная благодарность за полезное видео. От тебя первого узнал как работать с динамическим компонентом. Обязательно возьму на вооружение такой прием с svg
И тебе спасибо за теплое слово! Хех, я бы даже и подумать не мог, что это видео вообще кому-то пригодится. Записывал, чтобы просто рассказать о такой штуке 😅
Хороший материал! Больше видео по Vue 3!)
Спасибо огромное! Окей, будем грызть Vue глубже и дальше🐨
Благодарю за труд!
Благодарю! Классно получается
Спасибо! Рад стараться! Тем более, что это - мой первый курс на Ютубе. Так что спасибо и вам за поддержку💪
Благодарю за классное видео
Спасибо за Ваши труды. А скажите пожалуйста как "правильнее" кастомизировать ? Через слоты или пропсы ?
Спасибо за поддержку! Слоты дают возможность делать компоненты с разным текстом или HTML (иконки, наполнение). Пропсы дают возможность менять размеры, цвет, внешний вид, но с их помощью так же можно организовать какую-то логику внутри компонента (использовать v-if, v-else на основе наличия или отсутствия какого-то пропса).
В официальной документации ещё есть возможность на русском всё читать. Это если кому-то будет так удобнее изучать Vue3
Благодарю!
Благодарю!
А когда планируется релиз нового API на Flask Python? я сам долго выбирал курсы по IT, рассматривал разные компании, но в итоге остановился на Skypro, потому что у них есть наставники, которые помогают на всех этапах обучения и даже после, пока не устроишься на работу))
Для тех, кто не знает, SkyPro - это говнокурс от известной говноконторы SkyEng. P.S. Лайки под этим комментом накручены.
Зачем делать тутор на Фласке, если он все меньше и меньше востребован, так как весь мир переходит на FastAPI, либо же пинают труп Django
Все мои ролики ориентированы в первую очередь на новичков (и моих студентов). Мне почему FastAPI показался неподходящим для старта из-за ненужных деталей, которые идут с коробки. Вообще, я ДУМАЛ делать ролик сразу на FastAPI, потому что из коробки там всего больше, но... Поскольку сам начал путь с Flask, решил показать именно его. (Эх, томно вздыхаю по Express😩)
Поэтому мой ответ: не знаю, так получилось Будет круто, если ты расскажешь, насколько велика между ними разница и какие проекты осилит (или уже написаны) на том же FastAPI
@@expand_platform Все что написано на Flask можно написать на FastAPI. Но главное преимущество FastAPI это его асинхронность и удобная дока. Новичкам вряд ли это будет прям супер важно. Но зачем им изучать фласк, если он у них будет (почти) бесполезным багажом
Это резонно. В свободное время гляну и, если что, в будущем будем начинать с FastAPI. Идея и у меня такая была, так что...
Вот ты написал "пинают труп Djano". Почему так? Джанго становится неактуальным?
Я понимаю что ты все упрощаешь, но все же, говорить что API это данные это прям неверно. API это интерфейс взаимодействия с сервисом для сторонних программ. API необязательно должен отдавать тебе какие то данные. Новичков это введет в заблуждение
Ты говоришь все правильно, как разработчик, который уже понимает, что он делает Однако я не вижу ни одной причины, почему я не могу для упрощения объяснить тому, кто никогда ничего не слышал про API, что это штука для отдачи данных. А зачем мне начинать рассказывать в ролике про авторизацию, контент-менеджмент и другие функции которые, может выполнить API? Так что да, это обычное упрощение, которое я постоянно использую в обучении🙂
@@expand_platformПриведу аналогию - допустим тебе надо объяснить что такое автомобиль. Ты говоришь - это штука в которой можно спать. Хотя спать в машине, бесспорно, можно, но это далеко не основное ее применение. С API похожая ситуация, хоть API и может являться источником/приемником данных ( и в большинстве случаев так и будет), но это не его основная суть. Надеюсь понятно объяснил.
Да, это хорошее сравнение. Все по делу. Буду исправляться👌
Видишь, это у меня уже профессиональное - не вдаваться в подробности. Часто это хорошо, в обучении часто так и нужно. Но иногда что-то упускаю из виду и не замечаю этого со стороны. Так что спасибо за дополнение✌️
Жду новых роликов, вот про то что можно top-level await в модуле использовать я не знал, всегда узнаешь что то новое, даже в роликах для новичков
ВитПресс, а не Вайт.
Дык ВайтПресс звучит как-то удобнее🙃 И солиднее, что ли
Дамир, спасибо! Очень толково и лаконично. Нахожу все ответы на свои вопросы, причем с объяснением.
Оксана, всегда пожалуйста. Стараюсь делать видео ещё лучше и лаконичнее⭐
Я правильно понимаю, речь идет о расширении VSCode - Vue Official и его языковой помощник для TS? Сниппеты, подсветки и так далее? А то у меня расширение бывает, лагает.
Все верно
Надеюсь, настройки помогут. Причины могут быть разные. Если не получится оптимизировать скорость, в VS Code есть bisect extensions - инструмент для отладки плагинов. Именно с его помощью можно найти забаганные extensions, а потом уже настроить их
Спасибо, попробую, хотя я у себя не вижу каких то тормозов. Какое то время назад я наоборот отключал эту настройку, потому что так советовал сам разработчик расширения. При создании какого то файла вскод не видел этот файл у себя в хеше до перезагрузки редактора.
А я и сам не пойму, почему эта настройка была у меня выключена. В видео я забыл сказать, что если она выключена, то одновременно запускается два typescript сервера. Соответственно, нагрузка на комп вырастает в разы
И ещё, Дамир, сделай пожалуйста ролик о том, как ты открыл свою школу, как делал свой курс? Планируешь ли проводить занятия на английском?
Ну ты зришь в корень, конечно😅 Да, ролик о школе / курсе не помешал бы. Когда руки доберутся, не могу сказать. Да честно говоря, даже пока не знаю что я рассказывать в этом ролике. «Всем привет, у меня есть студенты, есть закрытый курс с лучшими материалами, спасибо за просмотр»😅 Но ты права, сообразить что-то надо
На английском... Ещё маленький вырос, надо подрасти Ну а если серьёзно, то кончено думаю. Надо больше практики английского
Поздравляю 🎉🎉
Благодарю!
Это конечно прикольно, но видео так редко выходят! Хотелось бы побольше видео по vuejs для новичков, мб показал бы как сверстать правильно верстку с функционалом легким каким-нибудь)
Привет, извини, что мало материалов по Vue. Я очень долго копил базу уроков именно в закрытом курсе для своих студентов. А Ютуб всегда был на втором, точнее, на третьем плане Но я могу помочь. Если хочешь узнать, как эффективнее и быстрее всего выучить Vue прямо со старта, напиши мне в телеграме, обсудим. Подкину пару идей для начала
Спасибо большое за видио, вы мне очень помогли. Я к сожалению новенький во фронтенде. Хотел узнать как можно прокинуть ивент с дочернего компонета миную промежуточного одного родителя? Пример у меня есть дочерний компонент Product он кидает ивент. Даный компонент находиться в ProductList, а ProductList в Home. Вот как кинуть ивент миную ProductList до компонета Home?
provide/inject полагаю
Привет, спасибо, рад что помог! Чтобы прикинуть ивент от ребенка к родителю, минуя посредников (других родителей), ты можешь использовать методы провайд / инжект (provide / inject) Если тебе нужно передавать данные так, чтобы они синхронизировали с разных компонентах на разных уровнях, используй import reactive переменной (реактивная переменная, объявляется в отдельном файле (typescript / JS). Или использую state management, та же Pinia из экосистемыVueJS
Спасибо! Быстро, наглядно и без воды!
Всегда пожалуйста⭐
Не вводи в заблуждение. shallowRef не реактивный на глубоком уровне, соответственно при изменении не происходит обновление DOM: отрисовка была потому-что произошёл рендер из-за ref.
Так... А в видео я тогда что говорил?
@@expand_platform Что он изменяется)
@@pegas9804 значит фигню сказал или намудрил чего. Ты верно меня исправил)
Не знаю зачем мне это) Ничего полезного не извлек, но смотрел с интересом) Подписку оформил, надеюсь на полезные видео в будущем! Сколько времени ты уже в веб-разработке?
Честно говоря, я тоже не знаю, зачем вам это) Но снимал с большим энтузиазмом Если говорить о серьезном отношении к делу, то скоро 3 года. Если брать отсчёт от первого index.html в моей жизни, то лет 10 уже
Я живу с защитником винды встроенным и не парюсь, я знаю что ему разрешать прибить, а что добавить в исключения, меня не парит это, а у людей истерика от каждого сигналаантивирусов
Почему бы и нет👍