Vue 3 фундаментальный курс от А до Я
HTML-код
- Опубликовано: 11 май 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 уже не актив ?
@@darkCoderDev актив, количество мест ограничено) могут добавит еще одно, если интересно:)
@@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 очень даже хороша , и на русском , она тебе говорит "просто сделайте вот это " и пример кода , берешь , вставляешь к себе и оно работает , немного подправил под себя и в путь)))
Как всегда огонь! Коротко и понятно, спасибо за бесплатный образовательный контент, которого действительно, очень мало с таким хорошим преподнесением 💥
Спасибо за твой огромный труд и вклад в развитие it сферы , пошел на Full stack и твой канал прям кладезь информации , спасибо большое
Самое лучшее руководство в видео формате, которое я видел. Навигация по тайм коду очень удобна. Смотреть нужно по несколько раз что бы понять некоторые моменты, но а автор объясняет куда более понятнее, чем преподаватели в онлайн школах платных. Спасибо тебе за проделанную работу.
На протяжение недели изучил таки курс. СПАСИБО тебе большое
Каждый день продолжая просмотр твоего видео, хотелось еще и еще ставить лайк.
Все по делу, ёмко и без воды, за что тебе респект. Красавчик!
огромную работу проделал автор курса, спасибо ему огромное! даже в англоязычном сегменте сложно найти что-то такое же полезное и эффективное про vue3
Ну неужели что-то про vue. Огромное спасибо.
И вам спасибо за поддержку !)
Друг, большая благодарность тебе! Твой урок просто жизненно необходим для русскоговорящей аудитории, развития тебе!
Очень круто, содержательно и богато рассказано и показано без лишнего мусора и воды. Благодарю и ожидаю новых видосов!!! Спасибо)))
Это супер вовремя, 1-го числа упала задача по вью, а накануне ты выложил этот видос. Чудеса) Спасибо за работу.
Качественно, коротко, понятно, четко) Спасибо за курс! хотелось бы побольше про vue например nuxtjs, vite или nuxtjs + vite :)
Очень приятно смотреть обучающие ролики такого уровня и прокачивать свои знания в разработке :) Спасибо!
Топовый контент. С нулевыми знаниями во Vue очень сильно прокачался. Спасибо!
Только что закончил курс от начала до конца, спасибо большое за контент и за проделанную работу, узнал много новых фишек по vue ) И ещё куча не пройдённого материала на канале, судя по комментариям - такого же классного и качественного ) Спасибо!
это один из лучших каналов для изучения фронтенда! Видосы очень плотные, бывает получасовой ролик пересматриваешь раз по 10, чтобы усвоить всю информацию. Спасибо автору!))
Автор просто красавчик. Всё как всегда чётко, ясно, без воды и с указанием всех нюансов!
Спасибо за курс, особенно за то, что он настолько сжатый по времени, очень удобно быстро освежить познания.
Тимур, спасибо большое за разбор библиотеки!) Очень доходчиво, информативно, все четко и по делу, без размазываний. То, что ты даешь знание людям, это хорошее дело) Огромная благодарность)
лучший урок по vue3 на данный момент, прекрасно всё изложено как для продвинутых, так и для начинающих разработчиков!
На 1:25:00 примерно бесполезный v-model, вызывающий еще и ошибку (т.к пропсы юзать так нельзя), используем просто следующее в MySelect:
Спасибо, добрый человек.
Восхитительно!
Низкий поклон за Ваши старания и умение преподносить информацию!
С первого раза, естественно, все не понял, но будем разбираться.
Восхищаюсь такими людьми, которые бесплатно преподносят такой кладезь информации!
Лучшего урока по Vue я не видел. Спасибо тебе огромное!!!
Тимур, ролик просто пушка!!! как раз вовремя выпустил) огромное СПАСИБО!!! Теперь надо переварить весь концентрат информации)
Ё-моё... "О, вью за три часа! То, что сейчас надо! За вечер под кофеек осилю обзорчик!" - подумал я. "Фуххх, наконец-то закончил" - тихонько произнес, вытряхивая полную кофейную банку окурков...
Спустя месяц))
блин, друг, от души реально, можно смотреть на одном дыхании!
Спасибо за такой большой труд!!!
Огромное спасибо за курс! Предпринимал уже несколько попыток пройти че-то по вьюшке, но это пока лучшее, что видел - в плане доступности объяснения, концентрированности инфы и в целом подачи.
Посмотрел от начала и до конца! Твой ролик выручил меня, спасибо тебе огромное!
Должен признать что это лучший курс по VUE без всякой пыли, но вероятно понятен он с первого раза только состоявшимся специалистам у кого уже есть опыт. Тем не менее прекрасная и краткая подача материала. Невероятная редакторская работа и качественная озвучка. Четко, со смыслом, с расстановками акцентов.
Спасибо за урок! Очень понятная подача материала. Рада, что нашла ваш канал!
Большое спасибо тебе! Твой урок очень крутой, понятный и просто жизненно необходим для русскоговорящей аудитории. Всех браг тебе за то, что ты делаешь!
Я ждала его! Спасибо!
Столько годноты, не успеваю смотреть. Обязательно гляну чуть позже
завтра обязательно глянешь
@@sergeytikhonov341 Может с понедельника ? :D
Такая же фигня!))
@Андрей :D
Спасибо! продуктивного просмотра!
Огромная благодарность за видео урок! Спасибо за Ваш труд!
Досмотрел до конца. Большое спасибо, тебе. Огромное количество полезной информации уместил в 3 часа.
Спасибо тебе , все четко и по делу , думаю всем будет полезен данный курс!
Рад, что понравилось! спасибо!
спасибо большое за полное и доступное описание материала!
Огромная благодарность за видео. Прям приятно по таким качественным роликам учиться.
Спасибо за ваш труд! Название полностью соответствует содержанию. Действительно фундаментально и от А до Я! Все так и есть. Рассказано очень понятным языком, с кучей примеров. Понятно даже полному новичку в vue
Очень крутой урок, все разжевано и по полочкам, здесь более чем фундамент👍
Начал с реакта, перешёл на вью, но оба курса смотрел на твоем канале. Очень круто и доступно объясняешь, никакой воды. Благодаря тебе изучение фреймворка ускорилось во много раз. Спасибо тебе огромное за твой труд!
@lurnuss почему перешел react? и что больше нравится для работы?
@@vlad-zf1ev по идее вью круче
Согласень на 100%
Фантастическое по плотности информации и полезности видео! Спасибо автор, Ваше трехчасовое видео смотрел, повторял и конспектировал часов 10 во много присестов.
Реально полезно и подробно! Побольше бы таких авторов!
Огромное спасибо! Начал изучать фронтэнд с бэка точнее работал с разными фреймворками php, когда писал на laravel стало интересно vue) очень интересный урок
Вот это годнота подъехала, спасибо огромное, лучшый автор уроков по js на ютубе
Спасибо большое!
Досмотрел до конца, как и все остальные фундаментальные курсы и продвинутые технологии) Спасибо за твои старания, это просто бомба
Огромная благодарность за столь подробный и последовательный курс. Конечно, нужно как можно больше практиковаться, пересматривая фрагменты из видео, чтобы освоить данные в видео знания
Даже не верится, что есть люди, которые делают такую колоссальную работу для широкой аудитории, хотя тем такой труд ценнее
Не давно устроился на работу frontend, пишу сайты на нативном js, стоял вопрос какую библиотеку изучать, и вот к нам на работу устроился опытный backend php, laravel, и просит чтоб я писал на vue, и тут твое видео меня спасает. Огромное спасибо тебе дружище.
php laravel vue -- это технологи будущего!
Все четко, доходчиво, без воды. Лайкище!
Огромное спасибо за урок. Досмотрел до конца, правда с паузами. Давно искал подобный урок. Огромная благодарочка :)
Классный курс,спасибо!!!Как всегда не зря потраченное время,посмотрел на одном дыхании,автору респект!!👍👍👍
оооо курс по Vue 3 подьехал еще и на 3 часа, по умолчанию лайк и комментарий!!
Спасибо!
Спасибо за контент по Vue!
У тебя очень классная подача материала, минимум воды =)
Трачу уйму времени на подготовку и монтаж! Спасибо!
@@UlbiTV Как наизусть заучивать столько функций чтобы их помнить постоянно?
Автор очень подробно и разжевано рассказывает, просто огромное спасибо, автору респект!!
Потрясающий материал, все по делу. Спасибо за такой серьезный труд и подход!
Спасибо большое за курс!!! Все относительно понятно. В конце курса, я, правда "поплыла", но думаю, это решается с опытом))
Желаю всех благ!
Просто, лучший) спасибо тебе огромное!
Очень четкий, краткий и толковый курс! Спасибо большое!
Шикарный урок по vue 3! Спасибо, Тимур!
Кстати кто учится ,остерегайтесь всех кто вас не понимает и обесценивает то чем вы занимаетесь ,и не слушайте никого, всё будет чётко, однажды кто то из вас создаст что то ,что станет мировым брендом ),стране нужны мозги,бренды и рабочие места.Если кто добьётся, не уезжайте из родных мест,это просьба
Контент - топ! Первое знакомство с Vue, чтобы написать код, который в видео был написан за 3 часа, я потратил 2 дня по 12 часов полноценной писанины. В голове каша, буду дальше разбираться) Спасибо большое
Решил для разнообразния посмотреть как устроен Vue. Огромное спасибо за данный курс, материал - супер!
Дружище, спасибо за старания. Видео - огонь, лучший справочник за все эти последние 10 месяцев.
Каждое видео-это завоз годноты.Спасибо за проделанную работу!
Спасибо!
Ты просто огонь, парень. Я в восторге!
Спасибо братан)
Бро, ты очень клёво объясняешь. Отдельно хочется похвалить дикцию и чёткую подачу материала без воды и мямленья. Лайк подписка.
лаконично, ясно, просто, понятно, без размазывания времени, идеальный урок!
Хорошая подача. Надоел реакт на работе, для души хотел на вью посмотреть, и тут очень хорошо структура дана и вход во вью. И начало понятно и куда дальше рыть. Для начинающих наверное тяжеловато будет, но если есть опыт на других фреймворках, то очень наглядно. Спасибо :)
Тимур как всегда на высоте. Топовые знания, огромное тебе спасибо)
Мне кажется ты серьезно развиваешь русскоязычное IT сообщество по вебу.
С вашей поддержкой! спасибо!
Тебе не кажется.]
Класс, досмотрел до конца, записывал действия паралельно. Пересматривал моменты минимум2 раза. Информации много, надеюсь ничего "не выпадет" после. Ролик сильный.
Отлично! Полгода назад начинал изучать Vue - забросил. Посмотрел - и освежил знания, и новое почерпнул!
Спасибо!
Вау!!! Круто!!! Как раз начал изучать Vue 3. Спасибо за урок)
Успехов )
Четко, быстро, отлично. Мне понравился
Лучшее из пособий. Огромное спасибо! И да. Я прорешал все и досмотрел до конца))
очень круто, про composition api настолько понятно, я как ребёнок радуюсь
Круто, досмотрел до конца..Так держать
Блин, реально, это самый лучший курс по вью!
Под каждый роликом в интернете можно увидеть такой комментарий))
Спасибо за видео. Мне как начинающему разработчику vue нравится своей доступностью и простотой. Плюс объяснение очень доходчивое.)
Мой любимый канал. Как всегда все очень профессионально. Большое Вам спасибо за все!!!
Это. Просто. Топчик!
Ulbi, большое спасибо!
Спасибо за поддержку)
Думаю зимой побалуюсь с вью, на работе только реакт, молодец, что расширяешь стек на канале. Ты лучший!
Спасибо большое!!
Шикарный курс, большое спасибо за труд и старания 👍
Не передать словами какое крутое видео! Спасибо большое за проделанную работу! Смотрел видео в районе 4х недель, только сегодня закончил :) Еще раз спасибо!!
Спасибо большое за Ваш труд!
И вам за поддержку!
Raxmat Timur! VueJs && Ts dan xam namuna kutiʙ kolamiz! Omadizni bersin Olloh iszdan rozi bolsin.
Raxmat :)
Уже несколько раз посмотрел. Самый лучший и подробный курс, спасибо.
Объективно, лучший урок по vue. Без воды, чистейшие, незамутенные знания, информационный концентрат.
Урааа!! Спасибо большое, очень ждал!
Спасибо и тебе)
Блин, это очень актуальное видео!) Спасибо за работу!)
И тебе спасибо за отзыв!
Как раз искала что-то для начала изучения vue. Спасибо тебе за твой труд!
Досмотрел таки до конца, да, столько информации и уместить в три часа...Круто.
Только подумал, когда там следующий топ-контент от Ulbi, захожу на ютуб и первая же рекомендация на главной странице! Топ!
хеех) Спасиб)
@@UlbiTV дружище сними видео про quasar, please
Вот это да!
Спасибо большое!
Такого информативного материала нигде нет.
Благодарю!
Мощный контент, второй день учу, не могу остановится. Делайте еще в таком формате, очень информативно!!!
Досмотрел до конца, просто взрыв мозга, спасибо курс отличный, с 0 столько информации переварить за раз нереально, ещё пару раз пересмотреть точно нужно, чтоб понять что я переписал с этого урока себе в ИДЕ, как и почему оно работает
Спасибо! только начал смотреть, сразу лайк. Т.к. человек заботится о моем времени )
Следующие 3 часа обещают быть интересными, спасибо за контент! По вью бесплатного мало. Также хотелось по тестирование и реакт нейтиву курс
будет и то и другое, вопрос времени
А если не просто смотреть, но и писать код, то обещают быть интересными 3 дня :))
особенно по тестам ждем)@@UlbiTV
Я посмотрел до конца, и могу сказать, что все в целом очень понравилось, и сам урок и фреймворк, которым уже начал работать. Спасибо за труд и время который ты вложил в этом бесплатном формате. Урок очень информативный и Объемный․ Для начинающих как я конечно сложно все сразу освоить и применять, но думаю можно время от времени вернутся и по закладкам снова посмотреть. Кстати в уроках закладки очень удобны и за это тебе отдельное спасибо). Всем успехов!