Vue 3 фундаментальный курс от А до Я
Вставка
- Опубліковано 19 тра 2024
- В этом ролике мы разберем все основные концепции Vue 3 и пройдемся по нему от А до Я. Разработаем приложение с основными кейсами, которые встречаются везде: CRUD, сортировка, поиск, пагинация, динамическая пагинация. Сделаем mixins, directives, изучим vuex и composition api.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Исходный код урока здесь ➝ t.me/ulbi_tv/20
Таймкоды:
00:00 ➝ Введение
02:00 ➝ Теория
07:50 ➝ Начало разработки. Создание проекта
12:40 ➝ Компонент App
14:41 ➝ Интерполяция
15:44 ➝ Methods. V-ON. Слушатели событий
17:40 ➝ Vue devtools. Инструменты разработчика
20:00 ➝ Cтили
21:51 ➝ Отрисовка в цикле. Директива V-FOR
23:00 ➝ Создание нового поста
25:35 ➝ Двустороннее связывание
30:30 ➝ Модификаторы stop, prevent
31:50 ➝ Декомпозиция. Создаем переиспользуемые компоненты
35:30 ➝ Props. Передаем данные в компонент
38:20 ➝ V-MODEL
41:20 ➝ $emit. Обмен данными между дочерним и родительским компонентом
50:10 ➝ Библиотека UI компонентов
53:55 ➝ Глобальная регистрация компонента
58:20 ➝ Подробно о V-MODEL
01:04:08 ➝ Удаление поста. Ключи KEY в цикле
01:07:30 ➝ Отрисовка по условию
01:10:20 ➝ Модальное окно
01:16:00 ➝ Модификаторы V-MODEL
01:17:25 ➝ Работа с сервером. Получаем посты. Axios
01:20:23 ➝ Жизненный цикл компонента
01:23:20 ➝ Индикатор загрузки данных
01:25:00 ➝ Выпадающий список. Сортировка постов
01:31:08 ➝ Наблюдаемые WATCH и вычисляемые COMPUTED свойства
01:39:08 ➝ Анимации transition group
01:42:20 ➝ Поиск постов. Фильтрация
01:44:15 ➝ Пагинация. Постраничный вывод
01:48:08 ➝ Динамический биндинг классов и стилей
01:51:30 ➝ Динамическая пагинация. Бесконечная лента. Intersection API
01:54:20 ➝ Refs. Доступ к DOM элементу
01:58:48 ➝ VUE-ROUTER. Постраничная навигация
02:07:50 ➝ Динамическая навигация
02:11:10 ➝ Создаем собственные директивы V-INTERSACTION и V-FOCUS
02:18:15 ➝ Mixins. Примеси
02:22:15 ➝ Vuex. Глобальное состояние приложения
02:47:15 ➝ Composition API
03:00:40 ➝ Самое время поставить КОММЕНТАРИЙ и написать ЛАЙК :)
Мой канал в telegram и канал для общения подписчиков - t.me/ulbi_tv
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек ➝ qiwi.com/n/BODYE821
Яндекс деньги ➝ yoomoney.ru/to/4100116193037469 - Наука та технологія
Если хочешь поддержать меня и мои старания, то жду тебя на патреоне, скоро будут крутые бонусы www.patreon.com/ulbitv
А за $29.99 уже не актив ?
@@NeoJohnSmit актив, количество мест ограничено) могут добавит еще одно, если интересно:)
@@UlbiTV даже интересно, как ты мотивируешь за 30$. Надеюсь не реальным стимулом (ахахах)
интересно было бы посмотреть про react native, может планируете записать курс?
Когда появятся деньги обязательно поддержу максимально!
Vue 3 за 3 часа растянулось на 3 недели😀. Огромное спасибо за предоставленный урок, он дороже лайка, подписки и комментария)
🤝
Ожидание: Курс занимает 3 часа.
Реальность: По часу разбираешь каждый кадр, сравнивая со своим кодом и ища ошибки.
Пока существуют такие люди как Тимур, сообщество будет непрерывно развиваться и становиться лучше
Артем, благодарю!
ну что , вот и пришло моё время пилить свою прохладную. Начал учить вёрстку в августе 2021 , хватило меня на месяц. Забросил. Вернулся к обучению 1го февраля 2022 , прошёл курс от Ивана Петриченко. Посмотрел почти все твои ролики по js, верстке и Реакту по 3-4 раза , посмотрел 100 интервью с канала АйТиБороды. Почти все что связано с js и Реакт у Владилена Минина. Сверстал 4 сайта , сделал 2 проекта на Реакте , и устроился на работу 4 дня назад. 6 месяцев спустя. У вас все получится парни. Тимур и все кто пилит образовательный контент на ютуб , я бы сражался за вас ! Готов пожать руку каждому кто тратит свое время на то что бы донести информацию до людей.
Те кто читает этот пост , у вас получится если вы этого действительно хотите.
Я сегодня ел пиццу и обсуждал как нам прописать темы в тайлвинд, и знаете что ! люди с которыми я разговаривал , правда понимали меня)))) да пока я учился вокруг не было заинтересованных в АйТи людей , и иногда было тяжело просто учится. Но это того стоит , свет в конце тоннеля есть !
П.С. смотрел ролики , и учился кодить на Реакте , а устроился на Вью !)))
За 3 дня посмотрел где то 10 часов видео по Вью , из них 6 часов это 3х часовой курс по Вью от Тимура 🤝🤝🤝
Теперь я знаю Кунг-фу (Вью ))))!
Ещё раз спасибо за твой труд , ты лучший
как же ты сильно описал мою жизнь. Упоминул Ваню, Минина, Тимур, Бороду... Да, нужно продолжать работать
Поздравляю! Тоже прошла этот путь, теперь набираюсь сил (знаний), чтобы пойти дальше, найти компанию, где будет более серьезный подход к технологиям. Иногда кажется, что ничего не умею, хотя коммерческий опыт уже 2 годика. Эффект самозванца до сих пор присутствует, жесть просто)
Круто! Поздравляю!!! Спасибо за долю позитива!
А ребята действительно молодцы!
Красавец! Кого сейчас смотришь? Может что-то посоветуешь, что можно посмотреть по Vue после этого видео.
@@evilinarm документация у Vue 3 очень даже хороша , и на русском , она тебе говорит "просто сделайте вот это " и пример кода , берешь , вставляешь к себе и оно работает , немного подправил под себя и в путь)))
Ну неужели что-то про vue. Огромное спасибо.
И вам спасибо за поддержку !)
Столько годноты, не успеваю смотреть. Обязательно гляну чуть позже
завтра обязательно глянешь
@@sergeytikhonov341 Может с понедельника ? :D
Такая же фигня!))
@Андрей :D
Спасибо! продуктивного просмотра!
Спасибо за твой огромный труд и вклад в развитие it сферы , пошел на Full stack и твой канал прям кладезь информации , спасибо большое
Не давно устроился на работу frontend, пишу сайты на нативном js, стоял вопрос какую библиотеку изучать, и вот к нам на работу устроился опытный backend php, laravel, и просит чтоб я писал на vue, и тут твое видео меня спасает. Огромное спасибо тебе дружище.
php laravel vue -- это технологи будущего!
Как всегда огонь! Коротко и понятно, спасибо за бесплатный образовательный контент, которого действительно, очень мало с таким хорошим преподнесением 💥
Начал с реакта, перешёл на вью, но оба курса смотрел на твоем канале. Очень круто и доступно объясняешь, никакой воды. Благодаря тебе изучение фреймворка ускорилось во много раз. Спасибо тебе огромное за твой труд!
@lurnuss почему перешел react? и что больше нравится для работы?
@@vlad-zf1ev по идее вью круче
Согласень на 100%
Друг, большая благодарность тебе! Твой урок просто жизненно необходим для русскоговорящей аудитории, развития тебе!
огромную работу проделал автор курса, спасибо ему огромное! даже в англоязычном сегменте сложно найти что-то такое же полезное и эффективное про vue3
Качественно, коротко, понятно, четко) Спасибо за курс! хотелось бы побольше про vue например nuxtjs, vite или nuxtjs + vite :)
На протяжение недели изучил таки курс. СПАСИБО тебе большое
Каждый день продолжая просмотр твоего видео, хотелось еще и еще ставить лайк.
Все по делу, ёмко и без воды, за что тебе респект. Красавчик!
Самое лучшее руководство в видео формате, которое я видел. Навигация по тайм коду очень удобна. Смотреть нужно по несколько раз что бы понять некоторые моменты, но а автор объясняет куда более понятнее, чем преподаватели в онлайн школах платных. Спасибо тебе за проделанную работу.
Это супер вовремя, 1-го числа упала задача по вью, а накануне ты выложил этот видос. Чудеса) Спасибо за работу.
Очень круто, содержательно и богато рассказано и показано без лишнего мусора и воды. Благодарю и ожидаю новых видосов!!! Спасибо)))
Ё-моё... "О, вью за три часа! То, что сейчас надо! За вечер под кофеек осилю обзорчик!" - подумал я. "Фуххх, наконец-то закончил" - тихонько произнес, вытряхивая полную кофейную банку окурков...
Спустя месяц))
Топовый контент. С нулевыми знаниями во Vue очень сильно прокачался. Спасибо!
это один из лучших каналов для изучения фронтенда! Видосы очень плотные, бывает получасовой ролик пересматриваешь раз по 10, чтобы усвоить всю информацию. Спасибо автору!))
Только что закончил курс от начала до конца, спасибо большое за контент и за проделанную работу, узнал много новых фишек по vue ) И ещё куча не пройдённого материала на канале, судя по комментариям - такого же классного и качественного ) Спасибо!
Очень приятно смотреть обучающие ролики такого уровня и прокачивать свои знания в разработке :) Спасибо!
лучший урок по vue3 на данный момент, прекрасно всё изложено как для продвинутых, так и для начинающих разработчиков!
Спасибо за курс, особенно за то, что он настолько сжатый по времени, очень удобно быстро освежить познания.
Огромное спасибо за курс! Предпринимал уже несколько попыток пройти че-то по вьюшке, но это пока лучшее, что видел - в плане доступности объяснения, концентрированности инфы и в целом подачи.
Автор просто красавчик. Всё как всегда чётко, ясно, без воды и с указанием всех нюансов!
На 1:25:00 примерно бесполезный v-model, вызывающий еще и ошибку (т.к пропсы юзать так нельзя), используем просто следующее в MySelect:
Спасибо, добрый человек.
Восхитительно!
Низкий поклон за Ваши старания и умение преподносить информацию!
С первого раза, естественно, все не понял, но будем разбираться.
Восхищаюсь такими людьми, которые бесплатно преподносят такой кладезь информации!
Огромная благодарность за столь подробный и последовательный курс. Конечно, нужно как можно больше практиковаться, пересматривая фрагменты из видео, чтобы освоить данные в видео знания
Даже не верится, что есть люди, которые делают такую колоссальную работу для широкой аудитории, хотя тем такой труд ценнее
Должен признать что это лучший курс по VUE без всякой пыли, но вероятно понятен он с первого раза только состоявшимся специалистам у кого уже есть опыт. Тем не менее прекрасная и краткая подача материала. Невероятная редакторская работа и качественная озвучка. Четко, со смыслом, с расстановками акцентов.
Огромное спасибо! Начал изучать фронтэнд с бэка точнее работал с разными фреймворками php, когда писал на laravel стало интересно vue) очень интересный урок
Тимур, спасибо большое за разбор библиотеки!) Очень доходчиво, информативно, все четко и по делу, без размазываний. То, что ты даешь знание людям, это хорошее дело) Огромная благодарность)
Решил для разнообразния посмотреть как устроен Vue. Огромное спасибо за данный курс, материал - супер!
оооо курс по Vue 3 подьехал еще и на 3 часа, по умолчанию лайк и комментарий!!
Спасибо!
Тимур, ролик просто пушка!!! как раз вовремя выпустил) огромное СПАСИБО!!! Теперь надо переварить весь концентрат информации)
Спасибо за ваш труд! Название полностью соответствует содержанию. Действительно фундаментально и от А до Я! Все так и есть. Рассказано очень понятным языком, с кучей примеров. Понятно даже полному новичку в vue
Автор очень подробно и разжевано рассказывает, просто огромное спасибо, автору респект!!
Посмотрел от начала и до конца! Твой ролик выручил меня, спасибо тебе огромное!
спасибо большое за полное и доступное описание материала!
Лучшего урока по Vue я не видел. Спасибо тебе огромное!!!
Отлично! Полгода назад начинал изучать Vue - забросил. Посмотрел - и освежил знания, и новое почерпнул!
Спасибо!
Только подумал, когда там следующий топ-контент от Ulbi, захожу на ютуб и первая же рекомендация на главной странице! Топ!
хеех) Спасиб)
@@UlbiTV дружище сними видео про quasar, please
Вот это годнота подъехала, спасибо огромное, лучшый автор уроков по js на ютубе
Спасибо большое!
Огромная благодарность за видео урок! Спасибо за Ваш труд!
Очень четкий, краткий и толковый курс! Спасибо большое!
Спасибо тебе , все четко и по делу , думаю всем будет полезен данный курс!
Рад, что понравилось! спасибо!
Блин, реально, это самый лучший курс по вью!
Под каждый роликом в интернете можно увидеть такой комментарий))
Досмотрел до конца. Большое спасибо, тебе. Огромное количество полезной информации уместил в 3 часа.
блин, друг, от души реально, можно смотреть на одном дыхании!
Спасибо за такой большой труд!!!
Тимур как всегда на высоте. Топовые знания, огромное тебе спасибо)
Мне кажется ты серьезно развиваешь русскоязычное IT сообщество по вебу.
С вашей поддержкой! спасибо!
Тебе не кажется.]
Очень крутой урок, все разжевано и по полочкам, здесь более чем фундамент👍
Фантастическое по плотности информации и полезности видео! Спасибо автор, Ваше трехчасовое видео смотрел, повторял и конспектировал часов 10 во много присестов.
Огромная благодарность за видео. Прям приятно по таким качественным роликам учиться.
Ты просто огонь, парень. Я в восторге!
Спасибо братан)
Контент - топ! Первое знакомство с Vue, чтобы написать код, который в видео был написан за 3 часа, я потратил 2 дня по 12 часов полноценной писанины. В голове каша, буду дальше разбираться) Спасибо большое
лаконично, ясно, просто, понятно, без размазывания времени, идеальный урок!
Большое спасибо тебе! Твой урок очень крутой, понятный и просто жизненно необходим для русскоговорящей аудитории. Всех браг тебе за то, что ты делаешь!
Все четко, доходчиво, без воды. Лайкище!
С вашим талантом объяснять (преподавать), да запилить бы полный, вот прямо совсем полный курс по JS, было бы просто агонь!
Не то чтобы по JS нет курсов, ибо их как раз таки очень много.
Но есть проблемки- либо слишком заумно рассказывают, либо поверхностно, либо сами не понимают что несут фигню.
Приходится книжки читать.
Не, бесспорно, что книги это очень мощный источник знаний, но когда это еще подкреплено визуально, так сказать, то вот в моем случае обучение идет мега быстро.
И вот касаемо данного видео...Сколько ни читал и ни смотрел роликов по Вью, почему-то очень быстро прекращал это занятие, ибо не информативно.
Ваше видео это первое видео по Вью, которое посмотрел до конца, с интересом и на одном дыхании!
Ну и по-традиции- Респект и уважуха!
У Дмитрия Лаврика на канале очень много полезных вебинаров с инсайдами на тему JS, и подача качественная)
Спасибо за урок! Очень понятная подача материала. Рада, что нашла ваш канал!
Объективно, лучший урок по vue. Без воды, чистейшие, незамутенные знания, информационный концентрат.
А я думал куда ты пропал :)) Блин бро реально психанул 3 часа :))
Психанул так психанул :D
Спасибо большое за курс!!! Все относительно понятно. В конце курса, я, правда "поплыла", но думаю, это решается с опытом))
Желаю всех благ!
Досмотрел до конца, как и все остальные фундаментальные курсы и продвинутые технологии) Спасибо за твои старания, это просто бомба
Бро, ты очень клёво объясняешь. Отдельно хочется похвалить дикцию и чёткую подачу материала без воды и мямленья. Лайк подписка.
Думаю зимой побалуюсь с вью, на работе только реакт, молодец, что расширяешь стек на канале. Ты лучший!
Спасибо большое!!
Урок действительно крутой, думаю, что я еще пересмотрю его. Странно, что ни у кого нет никаких вопросов, может я единственный, кто это пытался реализовать после просмотра видео. Я надеюсь, что автор читает комментарии и даст ответ в каком-нибудь дополнительном видео, либо в телеграмме своем:
1) Мы не реализовали удаление постов через store, не работает у меня, не работает в исходнике.
2) Навигация, не динамическая, а обычная. Тоже не была показана через store. (Где мы через цикл меняли pageNumber)
3) Что делать с дочерними компонентами, события которых мы прокидывали наверх? Их надо переписывать и вытягивать напрямую со стора?
4) Редактирование созданных полей, хотелось бы увидеть, как можно реализовать такое.
В любом случае, автору спасибо за такой большой труд. Надеюсь, что помимо моих вопросов, будут еще вопросы, а затем автор выпустит какое-то видео с ответов. Всех благ и всего самого наилучшего!
Досмотрел до конца, просто взрыв мозга, спасибо курс отличный, с 0 столько информации переварить за раз нереально, ещё пару раз пересмотреть точно нужно, чтоб понять что я переписал с этого урока себе в ИДЕ, как и почему оно работает
Огромное спасибо за урок. Досмотрел до конца, правда с паузами. Давно искал подобный урок. Огромная благодарочка :)
Я ждала его! Спасибо!
Следующие 3 часа обещают быть интересными, спасибо за контент! По вью бесплатного мало. Также хотелось по тестирование и реакт нейтиву курс
будет и то и другое, вопрос времени
А если не просто смотреть, но и писать код, то обещают быть интересными 3 дня :))
особенно по тестам ждем)@@UlbiTV
Реально полезно и подробно! Побольше бы таких авторов!
Потрясающий материал, все по делу. Спасибо за такой серьезный труд и подход!
Хорошая подача. Надоел реакт на работе, для души хотел на вью посмотреть, и тут очень хорошо структура дана и вход во вью. И начало понятно и куда дальше рыть. Для начинающих наверное тяжеловато будет, но если есть опыт на других фреймворках, то очень наглядно. Спасибо :)
Raxmat Timur! VueJs && Ts dan xam namuna kutiʙ kolamiz! Omadizni bersin Olloh iszdan rozi bolsin.
Raxmat :)
Как раз искала что-то для начала изучения vue. Спасибо тебе за твой труд!
Спасибо за видео. Мне как начинающему разработчику vue нравится своей доступностью и простотой. Плюс объяснение очень доходчивое.)
Каждое видео-это завоз годноты.Спасибо за проделанную работу!
Спасибо!
Спасибо за контент по Vue!
У тебя очень классная подача материала, минимум воды =)
Трачу уйму времени на подготовку и монтаж! Спасибо!
@@UlbiTV Как наизусть заучивать столько функций чтобы их помнить постоянно?
Досмотрел таки до конца, да, столько информации и уместить в три часа...Круто.
Класс, досмотрел до конца, записывал действия паралельно. Пересматривал моменты минимум2 раза. Информации много, надеюсь ничего "не выпадет" после. Ролик сильный.
Хотел начать изучать vue, как раз с этого и начну, так как твоя подача мне подходит. Спасибо большое.) ...не за горами те дни, когда будет 100к)
Спасибо дружище!) на 100к жду коммент от тебя :D Успехов!
3 часа сплошной полезной инфы?.. Тимур решил другие каналы без контента оставить? Зачем так подробно и понятно объяснять? Остальным же надо хоть что-нибудь оставить🤣🤣🤣
Ps: шутки шутками, но гигантское спасибо за такую колоссальную работу, видимо все выходные буду внимательно знакомиться, так что желаю всем удачи с изучением 👍
Да, да, Руслан)) Спасибо!
Реально концентрация информации, порой нескольких секунд достаточно, чтобы уже остановить видео и пойти что-то пробовать или читать дополнительно. Плюс, шикарный порядок поступления информации - каждая фича появляется не просто так, а потому что возникает в ней необходимость. Мне вот этот момент прям больше всего зашел, что всё очень последовательно и в системе излагается, а не просто вразброс - есть такое, есть такое, а как это соединить еще надо думать - тут всё и сразу. Огонь 🔥🔥
Дружище, спасибо за старания. Видео - огонь, лучший справочник за все эти последние 10 месяцев.
Время на прохождение этих 3-ех часов = 3 дня. Но уже чуствуешь себя очень уверенно. Vue с НУЛЯ! Самый лучший курс в Ру Нете. До этого слушал Владилена Минина, но тут сильно все круче. Главное целиком. Курса достаточно чтобы создавать полноценные приложения. Нужны минимальные начальные знания про html/css/JS.
Спасибо за отзыв!
Потому что кое-кто сильно заморачивается на видеомонтаж и озвучку, подавая нам материал с "хрустящей корочкой" :)
Я посмотрел до конца, и могу сказать, что все в целом очень понравилось, и сам урок и фреймворк, которым уже начал работать. Спасибо за труд и время который ты вложил в этом бесплатном формате. Урок очень информативный и Объемный․ Для начинающих как я конечно сложно все сразу освоить и применять, но думаю можно время от времени вернутся и по закладкам снова посмотреть. Кстати в уроках закладки очень удобны и за это тебе отдельное спасибо). Всем успехов!
Уже несколько раз посмотрел. Самый лучший и подробный курс, спасибо.
Просто, лучший) спасибо тебе огромное!
Очень толково! Спасибо. Еще бы про слоты рассказал.
Просто огонь. Ну что бы во всем разобраться надо самому проделать все то же самое множество раз а это ну очень долго и трудно. Спасибо автору за его труд. Очень круто.
Долго, но очень полно и даже исчерпывающе. Благодарю!
Вау!!! Круто!!! Как раз начал изучать Vue 3. Спасибо за урок)
Успехов )
Коротко, ясно. Сепер мне как раз надо освоить за несколько дней а тут за 6 часов уклался спс
крутой курс! Устроился на работу где пишут на Vue, а до этого писал только на react. Очень помогло видео, автору большое спасибо)))
Классный курс,спасибо!!!Как всегда не зря потраченное время,посмотрел на одном дыхании,автору респект!!👍👍👍
ПРОСТО ЛУЧШИЙ!
Спасибо!
1:26:29 на select вместо v-model нужно использовать v-bind:value, иначе будет происходить мутация props-ов, lint ругается, а в общем лайк однозначна
не в--байнд, а :value
@@KostiaBazrov 😂
Чел спаибо тебе огромное уже полчаса не мог разобраться
Спасибо
спасибо! А при этом дефолтное значение в селекторе отображается? У меня пустое поле, и не могу найти, как это исправить. Только если disabled убрать, но тоже криво
очень круто, про composition api настолько понятно, я как ребёнок радуюсь
Спасибо большое! Пишу на реакт, нужно быстро вкатиться во вью для нового проекта! Все оказалось понятно и доступно.