Vue JS БЫСТРЫЙ КУРС 2021 для начинающих. Vue router, vuex, vuetify
ฝัง
- เผยแพร่เมื่อ 14 พ.ย. 2024
- В этом ролике мы пройдемся по всем основным возможностям фрэймворка vue js. Рассмотрим vue router для постраничной навигации и изучим стэйт менеджер vuex.
Vue js уроки, vue полный курс. Vue vuex vutify. Vue router.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/fron...
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - www.qiwi.com/n...
Яндекс деньги - yoomoney.ru/to...
#Vue #Vuejs #Vuex
0:00 Введение
0:42 Установка vue-cli
1:00 Установка проекта
1:33 Обзор vuetify
2:04 Страница установки vuetify
2:23 Установка vuetify через консоль и обзор структуры папок
2:39 Попытка запуска проекта
3:10 Удаление лишних файлов и папок
3:35 Краткое ознакомление со структурой написание кода для одного компонента
3:48 Создание навигационной панели
5:27 Вынесение шаблона навигационной панели в отдельный компонент
6:27 Создание страниц
7:00 Установка vue-router для навигации по страницам
7:10 Создание файла router.js для прописывания путей
8:10 lazy loading
8:46 Импорт используемого плагина VueRouter в main.js
9:10 Как отображать компоненты, прописанные в routes
9:26 "Оживление" кнопок
10:05 Демонстрация перехода по страницам
10:15 Создание фото галереи
10:37 Как работать с данными во Vue
11:50 отображение данных в компоненте через директиву v-for
12:15 передача данных через props свойство компонента и их отображение
12:36 Обязательная директива v-bind для передачи props в компонент
13:02 Как отображать props компонента в шаблоне(интерполяция данных)
13:29 Как получать данные динамически с помощью асинхронного запроса вместо hard code
13:39 Установка библиотеки axios
13:49 Подключение библиотеки axios и обращение к ней через this в каждом компоненте
14:05 Как выглядит get запрос в компоненте
14:15 Понарошечный api jsonplaceholder для получения данных через запросы
14:25 Как ограничить количество получаемых данных
14:35 Как обработать полученный ответ от сервера после запроса(Promise)
14:45 Рефакторинг написания запросов компонента
15:00 Обращение к данным и методам компонента(компонент - это объект) происходит через this
15:10 Теперь данные отображаются те, которые пришли из jsonplaceholder
15:20 Примеры тегов и их атрибутов для верстки, о которых лучше почитать в документации vuetify
16:30 Как выглядит галерея с изображениями
16:40 Создание фотографий
17:50 Оживление формы добавления фотографий в галерею(v-model, @click)
19:15 Как прочитать фотографию
20:15 Как прокинуть объект фотографии в родительский компонент для отображения в галерее
21:00 Реализация метода по названию испускаемого события, которое отлавливается
21:49 Ошибка в файловом вводе(нельзя передавать строки)
22:20 Компонент "Всплывающее окно"(v-model для вставки полей из объекта photo)
24:25 Редакторы кода и IDE могут автоматически импортировать и регистрировать компоненты
24:30 "Оживление" диалогового окна(@click, this.$emit)
25:40 Видимость диалогового окна
27:00 Как выглядит диалоговое окно и ошибки все с тем же файловым вводом(ожидает объект)
27:15 Диалоговое окно появляется, но фото не отображается
27:25 Передал img, а надо было url
27:40 Вторая попытка(успех!)
27:45 Ошибка в логах(как и React, props изменять нельзя, хотя в React компоненты являются чистыми функциями, поэтому они там неизменяемы по определению "чистых функций"; почему во Vue также решили, что props нельзя изменять - кто знает)
28:00 Что такое двухстороннее связывание или двухсторонняя привязка
28:40 Отслеживание
29:00 Демонстрация отслеживания
29:10 Меняем значение dialogVisible при отслеживании изменения значения value
29:35 dialogVisible делаем отслеживаемым
29:50 Демонстрация диалоговых окон без ошибок в консоли
30:05 Вычисляемые свойства
30:50 Демонстрация изменения названия фотографии от одной к другой в модальном окне
30:59 Что хорошего в вычисляемом свойстве?
31:15 Условный рендеринг фотографий(v-if, v-esle-if, v-else)
32:00 Скрытие элемента(v-show, меняет display свойство css на none в случае false)
32:20 Итоги по основам Vue
32:30 Vuex(аналог Redux, MobX)
32:50 Создание store
33:00 Снова показ того, как во Vue подключаются плагины
33:50 Модули Vuex(в Redux для этого есть reducer)
34:13 Структура модуля Vuex
37:15 Ошибка в логах, потому что axios надо импортировать в каждый используемый модуль
37:35 Демонстрация работы без ошибки
37:55 dialogVisible в модуле, действия и мутации для него, состояние, геттер
40:50 Ошибки в консоле - надо @click:outside
41:13 Демонстрация работы без ошибки
41:25 Сократить запись this.$store.dispatch и подобные через mapGetters, mapActions, mapMutations, mapState
41:45 деструктуризация при импортировании мап-функций
41:50 rest operator для раскрытия значений массива через запятую в methods
42:06 Подобные действия делаются с mapMutations
42:43 Итоги курса
Спасибо!!!!!!!!
Сделал небольшое приложение, написал в консоле npm run serve, появилась ссылка, все работает, но когда делаю билд проекта (npm run build), почему то при запуске index.html пустая страница, че не так ?
Ребят, у кого затык с router начиная с 8:00. Вы всё делаете по коду, но он не работает и выдаёт странную ошибку про Webpack. Обратите внимание на версию vue-router. Скорей всего вы ставите 4-ую. А здесь 3. Там было несколько breaking changes при смене версий. Проще всего поставить конкретную версию, которую и использует Ulbi в туториале. npm i vue-router@3.4.9
классный у тебя комментарий)
Огромное спасибо!
Дай бог тебе здоровья, бро
Благодарю, так и есть. С рождеством!!!
@@VeloGitaryst то ўзаемна!)
У этого канала большое будущее. Новички после каналов для начинающих придут сюда и будут здесь, пока не начнут понимать английский.
Учил Реакт, пришел стажером. Думал будет Ангуляр. Оказалось, что надо пилить на Вью. Автор лучший.
Вью оч крутой!)
Сам убедился в этом.
Нужно больше контента на Vue)
Я внезапно с реакта попал на Vue, и обратил внимание, что по Vue намного меньше контена чем по Реакт.
Правда и разрабов тоже меньше. Но спрос то есть, и бабки за это платят.
И желательно "боевые кейсы" с ТS (vue-property-decorator) и всякое такое)
Красава, Владлен растянул это на 2 видео по 50 минут после которых ничего не понятно, а тут ты проделал красивую работу👍
бегите от владлена)
Отличная подача!!! Четко, быстро без воды и по делу!
Спасибо!)
@@UlbiTV Поддерживаю такой фрмат) Так держать!
Спасибо огромнейшее! Тимур, сколько хорошего контента ты приносишь в этот мир. Уверен, это вернётся сторицей)
твои 40 минут это мои пол дня.. зато сейчас я вроде знаю как делать вещи на ву - спасибо!
Спасибо, как екскурс в технологию и посмотреть как всё работает самое то)
Спасибо, на это упор и был!)
плотность полезной нагрузки на единицу времени зашкаливает
Старался, друг!) спасибо!)
Столько лет прошло, а я с кайфом видос посмотрел и многое стало понятно. Спасибо за твои видео!)🤙
Очень полезное видео. На канале очень много полезных видео. Спасибо Тимур, честно говоря только благодаря тебе получается изучить сложное понятным языком.
Успехов!
Я не понимаю как ты в 43 минуты уместил столько информации, сразу вникнуть конечно тяжело, но понять что за vue такой самое то
Ахахах, стараюсь, спасибо!)
Лучший гайд по сей день, спасибо 🔥
Круто, ты из многих новичков лепишь программистов
нормалек, актуально для 22, для домашки надо докрутить руками v-model - с getters не очень вариант и добавление фоток через mutation реализовать
Если честно то очень сильно было бы интересно про electron или же electron+react
Шикарно, как раз хотел ознакомиться:))) почему так идеально вовремя то всё время? :))) как всегда спасибо!!
😂❤️ Надеюсь будет полезно, спасибо!)
@@UlbiTV я в этом уверен:)))
Автор ты нечто) - в хорошем смысле слова
Спасибо вам огромное за поддержку!
такие вот видосы без кучи воды и разжовывания очевидных вещей - кайф!
спасибо Тимур!
благодаря твоему видео, я за вечер разобрался во вью, и устроился на первую работу
отличный обзорный курс, большой объем информации, все по делу. Благодарю!
Посмотрела много видео по vue. Если вы не новичок в веб разработке. То лучше начинать с этого видео. Спасибо! Все изложено быстро и понятно.
Друзья, что бы вы хотели видеть в следующем ролике?
1. React native полный курс
2. Electron десктопные приложения полный курс
3. Теория для подготовки к собеседованию (вопросы разного уровня сложности, по порядку - чистый js, css, react, vue, клиент-серверное взаимодействие)
4. graphQL + apollo + prisma ;)
Из предложенных конечно react native, а вообще ооочень хочется Next.js, на русском ютьюбе только у Минина есть, хотелось бы от тебя!)
Этот видос смотреть не буду, но лайк влеплю за труды!)
@@devorer77 ахах, учту, записал))
@@kolyabokov88 спасибо большое, некст в списке есть, в дальнейшем будет)
Бэкенд на laravel + немного фронта для VUE
Нужно было быстро вникнуть в фреймворк на базовом уровне, огромное спасибо за видос, и вообще не слушай хейтеров, которые сейчас появились, мол ты сделал курс платный, все правильно делаешь
Ну кайф чо, буду еще раз пересматривать, очень интересно бьіло посмотреть реализацию vuex, со стороньі не вьіглядит таким страшньім местом боли как в реакт!
Спасибо) да vuex удобен достаточно)
Спасибо за труд. Только плохая практика закидывать ссылку в кнопку. Можно и так
Согласен с вами, спасибо за замечание)
Никак не закрывается модальное окно
А так все супер - главное, понятно. Спасибо большое!
Как всегда на высоте 👍👍👍
Спасибо, бро)
Согласно официального описания Vue JS в директиву v-for надо добавить v-bind:key = "photo.id"
Спасибо, ты решил мою проблему
Офигенно! Спасибо!
Благодарю!)
Спасибо!👍👍 максимум годноты
Дружище, прикольный туториал. Но я, повторяя за тобой (все один в один), столкнулся с тем, что у меня не рендрится компонент. Скорее всего проблема в версиях. Было бы здорово, если ты рассказал какие версии ты юзал. А так желаю процветания каналу и всем добра=)
Здесь 2ая версия вью, спасибо!)
Спасибо за материал, вы довольно понятно объяснили первую часть видео, во второй уже появились вопросы по поводу работы vuetify. У вас есть пример кода на github к этому видео?
1) Интернет магазин на Vue3
2) Vue3 advanced
3) VENoM
4) Vue3 advanced + firebase
И как видите ничего не происходит!
- Это вполне логично ...
😀😀😀
Ты меня спас со своим видео
возможно не услышал, но на всякий напишу
для v-for ВСЕГДА НУЖНО указывать ключ с уникальным названием
Крутое видео, но моментами не понятно бывает конечно, слишком быстро, но в целом для введения очень даже не плохо
Спасибо)
Спасибо! Круто, полезно
Спасибо вам!
Очень круто!
Спасибо!)
В гугле в названии видео Vuetify упоминается, а тут его нет в названии. Интересно было бы сделать форму авторизации во всплывающем окне.
Да, это старое название) В ролике используем вьютифай
Воооу. Что-то интересное)
Вооу, спасибо!)
npm run serve если не ошибаюсь уже не нужен. vue cli тоже устарел вместо него используют вездесущий vite. Очень интересный курс.
А можно для самых глупеньких, как правильно сделать удаление? что бы в карточке с фото был допустим крестик который вызыввает ее удаление
Спасибо за твой труд!
нереальной крутой контент, сконцентрированный на одном канале. спасибо за видос! 10/10! но вот по вью есть вопросы. после реакта одним только своим синтаксисом вызывает отторжение. единственное желание это закрыть иде и пойти за трудовой, т.к кидают на проект на вью.
Классно 👍
Cпасибо))
У меня у одного не работает addPhoto после vuex изменений?? Вроде ничего там не менялось, не могу понять причину..
Ты на проверку загрузки фотки забил, а у меня именно это и отвалилось.
Стоит ли использовать vue в больших проектах?
Не вижу препятствий!)
Здраствуйте, подскажите где хранить ключи API, пути к ним. И как к ним обращаться.
Здравствуйте, можно в локальном хранилище браузера, localstorage, почитайте)
А на сервере? Извините за торможение в общении.
Не забудте пролайкать коментьі снизу
Вот вот!)
Всем привет!
Вопрос такой: в видосе сделано так
getters: {
getAllPhotos(state) {
return state.photos
},
getDialogVisible: (state) => state.dialogVisible,
getCurrentPhoto: (state) => state.currentPhoto
},
есть ли разница, как писать геттеры стрелочной функцией или обычной?
Т.к. суть геттеров подразумевает возврат данных, также как и сокращённая запись "стрелки", полагаю, что здесь разницы нет.)
Не хватает Nuxt'а для совсем уж мега крутости.
По наксту планируется быстрый курс)
Привет, подскажи, как у тебя выходит автозаполнение и подсказки при использовании vuex? у меня последняя версия vue, vuex, webstorm и у меня не работают подсказки, приходится commit, action и прочее вводить самому копируя и вставляя. Спасибо заранее
Хотя сделал идентично, как в видео, всё-равно командная строка ругается на:
v-for="photo in photos" v-bind:photo="photo"
Выдает ошибку: Custom elements in iteration require 'v-bind:key' directives.
Попробую разобраться с помощью документации.
Жаль, что так быстро всё меняется, что нельзя нормально дойти до конца crash-курса,
хотя версия vue - вторая, сервер перезапускал несколько раз, вроде всё проверил, как всегда..
РЕШЕНИЕ, например:
вместо:
писать:
посыпался, в общем, vue:
Error: Cannot find module 'vue-cli-plugin-vuetify', хотя сам плагин в проекте установлен.
РЕШЕНИЕ: в терминале переустановить плагин:$ vue add vuetify // однако после обнуляется ранее прописанная верстка NavBar.
Gовторить приложение без танцев с бубном нельзя (не могу?). Постоянно ошибки. Придётся документацию читать.
возможно, проблемы с vuetify плагином связаны с npm/yarn.
Всегда, когда изучаешь новые технологии, натыкаешься на кучу ошибок, немного практики, и их уже не будет) Успехов!)
А нельзя было ссылку на github оставить? Исходник посмотреть.
Бро, как мне понять что я установил Vue 3 или 2 например. Ты упоминал, что Vuetify Не будет работать с Vue 3. Я создал проект в вебшормер. Что мне сделать, что бы Вьютифай заработал?
Посмотри в package json версию!)
@@UlbiTV "vue": "^2.6.11", странно, вроде не 3.0. Но Header не появился
Если не добавляя фотографии нажать кнопку Добавить то в консоли появляется ошибка. В чём причина?
В том, что картинка с пустым адресом создается, это уже детали, но можете перед созданием проверять, выбрана картинка или нет!)
@@UlbiTV спасибо )
ты же звук отдельно от видео записываешь?
Да, а что?
@@UlbiTV просто поинтересовался)
Отличный курс для ознакомления, все четко и по делу. Но для себя понял, что фреймворк по сравнению с реактом просто ужасен, неприятный синтаксис и какая-то магия, куча абстракций.
Мутации вне vuex практика так себе. А так все очень круто.
code on github?
А можно курс по HTML CSS Js ?
Этого добра уже очень много на ютубе, не хочу повторяться!)
везде от о всех слышу - вью намного легче реакта для новичков. С реактом проблем особо нет та и с редаксом тоже, щас смотрю это и практически нихуя не выкупаю, в каком месте вью легче реакта ? И читаемость просто межгалактически сложная,лол,может что-то со мной не так
ну точнее я понимаю, что происходит, на словах, но супер сложно для восприятия
Сложно, потому что привык к реакту, поработаешь неделю-две, начнешь понимать что вью проще)
@@UlbiTV скорее всего, ну вот по реакту у тебя видосы хаваю на раз два, на лету хватаю все, а тут... я когда увидел двустороние связки вот эти, у меня чуть психика не нарушилась, я чуть плакать не начал, после vuex хоть немного в себя пришел
Все, бросаем реакт? :)
Одно другому не мешает 😂😂
top video in russian lang
thanks a lot, old sport
electron
NUXT.JS+LARAVEL
Ты конечно молодец что делаешь такие видео.
Но если повторять за тобой, то выясняется что ты в некоторых местах вырезаешь свои тупняки, но где именно ты изменил код не показываешь.
Это одно из первых таких видео на канале, и возможно есть косяки действительно, в последних 20-30 видео ты их наврядли найдешь :)
Спасибо, круто, полезно, но почему ты так торопишься
Спасибо) Да, согласен, этот курс особенно торопливый вышел)
Для начинающих сомнительное название. Спасибо за урок! Еле все чехлы в кучу собрал(
До половины видео не дотянул. Мозг сдох. Сначала горел долго а потом сдох ))))
Кнопки навигации так и остались убогими
))
Кайф
PLS, Can you make your videos slower !!!
Нихрена не для начинающих.(
Планирую новый курс по вью, он будет лучше)
@@UlbiTV Когда выйдет? Я накачал всяких - на выходных буду смотреть, но Ваш не помешает. Каждый раз находишь что-то новенькое.
@@Heretic3234 Не скоро, ближе к лету, щас загруженность очень большая
@@UlbiTV спасибо, будем ждать.
беспонтовое видео, слишком быстро, часть моментов вырезал где ты исправлял свои косяки.
А видео как называется?
Беспонтовый это ты!
советую сменить голос на искуственный. твой голос просто невозможно слушать. удачи.
Благодарю за видеоурок. Один из лучших для того, чтобы вспомнить Vue и попрактиковаться в нём, из того, что я смотрел.
P.S. для пользы другим: функции showDialog и setCurrentPhoto во Vuex можно было записать в одну:
SHOW_DIALOG(state, payload) {
state.dialogVisible = true;
state.currentPhoto = payload;
},
И вызвать её вот так из компонента:
openPhoto: function () {
this.$store.commit('SHOW_DIALOG', this.photo)
// или через mapMutations:
// this.SHOW_DIALOG(this.photo)
},
Ну и автор видимо просто забыл переписать функционал добавления своего фото на Vuex.
Для этого аналогично в mutations пишем:
AD_PHOTO: (state, payload) => state.photos.push(payload),
И в компоненте вместо этого эмита: this.$emit("addPhoto", photo) ,пишем это:
this.$store.commit('AD_PHOTO', photo)
Вдруг кто столкнулся с тем же что и я,
если reader.readAsDataURL(this.img[0]);
Спаситель, ещё бы кншн понять как axios не напрямую ипортировать в компонент
большое спасибо
я уже проверку ставил if но не спасала
24:36 Можно прямо на кастомном компоненте сделать @click.native="...", чтоб не пробрасывать с компонента фото на верх.
У кого ошибка с FileReader. Во Vue3 нужно прописать так:
reader.readAsDataURL(this.img[0])
Блин! Огромное спасибо, как же ты мне помог! Второй день маюсь с этой херней. Думаю что не так и пытаюсь разобраться. Теперь все заработало.