#10 Криптономикон-1 - Vue.js: практика
HTML-код
- Опубликовано: 29 сен 2024
- Исходный HTML/CSS для самостоятельного повторения - gitlab.com/vue...
Телеграм-сообщество: t.me/vuejs_club
Материалы к изучению:
- интерполяция и v-bind ru.vuejs.org/v...
- синтаксис шаблонов ru.vuejs.org/v...
- структурные директивы v-if и v-for ru.vuejs.org/v...
- условная отрисовка ru.vuejs.org/v...
- v-model ru.vuejs.org/v...
- обработка событий ru.vuejs.org/v...
Исходный код урока - gitlab.com/vue...
API для получения ключа: www.cryptocomp...
---
Видео создано благодаря подписчикам проекта на нашем Patreon.
Хотите получать контент на 3 месяца раньше остальных? Присоединяйтесь! / javascriptninja
Кто столкнулся с проблемой в Вёрстке и у кого ФИОЛЕТОВЫЙ фон и загрузка
Просто нужно удалить div с этой крутилкой
Удалить div блок там где есть svg animate-spin в вашей вёрстке (у меня это с 3 строки по 8 в моем компоненте)
спасибо у меня было такое сделал как ты рекомендовал
Большое спасибо, что только не пробовал , увидел ваш коммент и все заработало
целый день думал что делаю что то не так покамись не прочел комент )
Спасибо, дружище! Очень выручил. Видимо верстка поменялась.
Очень хорошая подача информаци, в ютубе самый доходчивый курс по vue и плюс еше и бесплатно спасибо огромное!)
спасибо большое , ты лучший
👌👌👌
У меня картинка с бесконечной загрузкой после подключения css
Это тест на умение читать комментарии :)
@@JavaScriptNinja уже исправил))
Внимаю
кажется в vue удобнее оживлять готовый html, по сравнению с react
Ясен пень, скоро труба вашему реакту
@@grantorino3465 Ну що ви таке говорите ?!
@@microspacer пророчество вещаю
@@grantorino3465 кирдык!
гораздо удобнее
"Отдельные люди называют их ярлыками". Золотой фонд цитат.
тайм-код pls
@@ДмитрийПарфенов-б5в 25.10
Алиасики)
Когда мы говорим список, думаем коллекция, подразумеваем массив - тоже в цитатник :)
Отсылка к Владилену?)
Похоже я что то пропустил ...(3:15)
Смотрю видео подряд и не пойму, из какого видео я уже должен был узнать о создании нового приложении с Vue cli ???
И спасибо, друг, что без todo list.
Домашнее задание в 8 видео
@@JavaScriptNinja Благодарю за ответ.
@@JavaScriptNinja смотрю уроки подряд, 16-04-2021, в 8 видео нет никакой домашки, что-то изменилось за столь короткий срок?, 8 видео это же это - #8 Бизнес логика или детали реализации? - Vue.js: концепции
@@Sergey_USB а вы описание видео гляньте, и в самом видео я это упоминаю
Нет файла index.html с контентом как в видео. Каждый раз приходиться по несколько часов тратить чтоб вспомнить как все приводить в порядок.
Вопрос к Илье ....Не знаю почему, но верстка не такая как в видео, + стили не подключаются, страница в загрузке.
++ стили не подключаются, верстка не совпадает
я так понял, с этой проблемой столкнулись те, кто только недавно на курс залетел ...
+++ Стили не подключаются.
Там все очень просто. Я решил эту проблему повнимательнее посмотрев на верстку. Уберите вектор круга первый (можно закоментить), из-за него вы видите прогрузку (этого элемента нет в начальном html у Ильи, поэтому стили ложаться некорректно). еще пару элементов, которые будут потом появляться, по ходу движения урока ниже по верстке (можно сравнить с тем что в начале у Ильи в браузере) тоже можно закоментить и добавлять уже по ходу урока. Со стилями все в порядке. Там ничего менять не надо.
Можно сделать проще - в гитлабе в репозитории с файлами html и css нажимаем кнопку Commits, выбираем initial commit и заходим в его файлы. Там лежат те самые неизменные в процессе прохождения курса файлы
Я редко кода пишу комментарии, но материал, который ты преподаёшь, настолько структурирован и рассказан простым языком, что начинающие по типу меня, начинают понимать что вообще происходит. Это пока что единственный курс на ютубе, посмотрев который, начинает вырисовываться хоть какая-то картина. Здоровья автору! Всем мирного неба над головой!
Нет. Как бэкендер говорю - ни хрена не понятно.
@@AxlNeferSkyПрактика, мой друг, пересматривай по два-три раза, пока не поймешь абсолютно все, что говорит автор в ролике.
@@zakarhappy5496 Нашел курс по vue у Владилена Минина, он мне больше зашел. Сразу показывает практику, без рассуждений о высших материях. Нюанс в том, что он слегка устарел, и приходится разбираться в том, что поменялось. Но Владилен достаточно объясняет по ходу дела что должно получиться, поэтому пока что удается разобраться в таких нестыковках.
Ну это если интересно вдруг)
@@AxlNeferSky Интересно, а какая причина есть, чтобы выбрать изучать vue в 2023?
@@4tez294 Смена места работы?
Один вопрос. А из какого такого видео мы должны уже были знать, как создавать приложение с помощью vue cli? Где в этом курсе я пропустил это?
Жиза, тоже непонятно
@@biscuitjerry8043 видео #8, закрепленный комментарий. Да и сам автор в видео об этом говорит.
Эта уточка теперь будет снится мне в ночных кошмарах )
Не гневите уточку, тогда не будет
Спасибо тебе, Илья, за твой вдумчивый контент, который реально позволяет смотреть на технологию и подходы в разработке, более тонко... видосы из раздела "концепции" - самый ТОП!
Спасибо что не todo list )))
Реально этот todo выбивает меня.
Курс VUE-RUB очень радует =)
из-за этого файла css у меня бесконечный прелоадер крутится в браузере((
Откатитесь на 1 коммит назад
@@JavaScriptNinja ого, спасибо за фидбек) я просто убрал пару стилей, которые за это отвечали
@@user-san-chous привет, подскажи - какие стили ты убрал?
@@divingeilat если так интересует какие стили надо убрать, а не просто откатиться на 1 коммит, то в панельке разработчика выбери svg с классом animate-spin и закоммить родительский тег этого svg. Решит твою проблему.
очередной курс для джунов/мидлов, но никак не для челов, которые пытаются освоить фронтенд с нуля :( жаль, походу остается только доку читать
Какой-то слишком страшный дисклеймер
за tailwind спасибо божественному верстальщику, респект и уважение!
Я конечно еще не знаю, что там дальше будет с этим tailwind, но пока что css в 2мега выглядит явно не божественно
@@grantorino3465 это на время разработки в css пишутся все возможные стили tailwind'а. В продакшене всё лишнее вырезается и остаётся очень маленький css. Значительно меньше, чем бутстрап, например.
@@SilverHarold тогда они скорее всего примерно одинакового размера получаются
Небольшая придирка. Я бы еще добавил фразу про фильтр, о том что сравнение происходит по ссылке на объект. Понятно, что это не из скоупа Vue, но лишний раз упомянуть было бы полезно. Даже при наличии опыта если в объекте есть id, я обычно фильтрую по id.
Прекрасный преподаватель. Вернулся к лекциям спустя год пересмотреть. Теперь смотрится все по другому, конечно. Война изменила все, теперь я оч боюсь за Климова, боюсь что не успею досмотреть все, что оставил в прошлом на потом
Автор 9 уроков красиво рассказывал теорию, а потом вылил на головы обучаемых реальный пример из жизни мидлов, не объясняя, как что устанавливать, типа "ну тут все понятно..." ан нет, нифига не ясно, как для новичка. Наверное вы крутой специалист, но вот объяснять практические вещи не умеете
А вы домашнее задание в 8 занятии выполнили? :)
Поясню - проблемы обычно возникают у тех кто пропускает домашнее задание где как раз просьба прочитать про установку и настройку vue-cli. Превращать видео в пересказ документации - я считаю неуважением ни к участникам курса ни к авторам документации
Молю, подскажите,что делать.Подключаю css и на локалхост идет бесконечная загрузка
прочитать другие комментарии? ;)
Даня Рахубовский
7 месяцев назад
Кто столкнулся с проблемой в Вёрстке и у кого ФИОЛЕТОВЫЙ фон и загрузка
Просто нужно удалить div с этой крутилкой
Удалить div блок там где есть svg animate-spin в вашей вёрстке (у меня это с 3 строки по 8 в моем компоненте)
Хорошо, что я не студент, а то бы меня опознали и искоренили ^^
3:40 Рекомендую при установки vue выбирать default (vue 3), меньше проблем потом будет.
Подскажите - скачал файлы стилей и темплейт, темплейт отображается нормально, но когда подключаю стили на странице элемент spinning circle занимает 100% экрана.
судя по всему это было сделано специально =/
Откатитесь на 1 коммит назад :)
@@JavaScriptNinja благодарю за этот пример, помогло осознать что у меня возникает паника при малейших проблемах.
А зачем в v-bind:key="t.name" писать, а не просто v-bind:key="t". Мы ведь потом все равно отдельно пишем интерполяцию {{ t.name }} и {{ t.price }}. Хотелось бы понять лучше, поэтому спрашиваю.
Потому что key должен быть уникальным тесктовым или строковым значением, а t это объект
Ничего не понял но очень интересно
Подскажите пожалуйста, установил плагины как у вас, но столкнулся с проблемой, что при авто-форматировании при сохранении все строчки перености в одноу строку, я не могу писать в разных строках бинды и тд...облазил весь интернет,помогло убрать в настройках wrap отключение переноса, но проблема вернулась и снова все переносит в строку
Либо я слишком тупой либо слишком сложно ....я хз вообще не вьезжаю
Даже не понимаю, что я упустил, но это видео явно рано для меня(( Спасибо за материал, но есть субъективное ощущение, что лично мне для старта просто не хватило знаний js. Возвращаюсь прокачивать JS..(( надеюсь смогу оценить курс позже)
Интересно какая цветовая схема для кода используется, мне нравиться, спокойненькая.
Cobalt2Theme если ты это имел в виду
С моего воробьиного полета вью дает пинка реакту по этой лекции. Не надо проверять предыдущее состояние стейта, можно пушить, события и модификаторы, забегая вперед есть модификатор .prevent и .stop. Жду пока Илья меня опустит на землю xDD
А из каких предыдущих видео мы должны знать про vue/cli?
Видео номер 8
Спасибо за видео.Коммент в поддержку!
я что то не пойму, что конкретно нельзя из этого делать в продакшене?
Смотрите дальше
По моему опыту, избегать конфликтов в названиях переменных, сокращением слова - плохая практика. Человеку, читающему код будет сходу непонятно, что t - это ticker, и чем он концептуально отличается от другой переменной ticker в этом же скопе. Регулярно страдаю в проектах от i, itm, item, itms и т.д. в одном скопе. Я бы сразу переименовал ticker из data в newTickerName. Длиннее, но читаемо.
Я пощвоояю себе однобуквенные переменные в коротких лямбда функциях
Мб будет полезно - по поводу v-bind мне в свое время очень запомнилось объяснение: "Если перед атрибутом стоит v-bind, то его содержимое является js кодом. Нет v-bind - содержимое является просто строкой"
Хоть это и не совсем так - на 38 минуте Илья объясняет, почему
В целом отлично, только есть некие неудобства с исходниками)
Как решили? Были проблемы с файлом css?
вот есть курсы от Минина или Ulbi TV- там все круто безусловно, но тут очень много мелочей, потерянных в тех видео. Хорошо раскрываются все тонкости и нюансы и рассматривается подход с разных сторон. Пожелание - чуть побыстрее вещать, а так только на скорости как минимум 1.2 более-менее нормально. А в целом все замечательно. Спасибо Автору!
Ну вот не соглашусь, у Минина очень разжеваный контент есть по Вью на просторах интернета (если не говорить о ютубе). Обьясняет все концепции VUE на практике отдельно по каждой, + SPA приложения на вью также есть с объяснением. Для меня тот контент гораздо ценнее, чем этот. Так как если бы я не знал vue, то тут бы точно ничего не понял, что пишет Илья и рассказывает, а особенно в первых 10-ти своих роликах по теории, что для новичков, скорее, это лишнее забивать голову до того, как щупаешь фреймворк (чисто мое мнение). Скорее, ты не видел материал Владилена, который есть в его отдельных курсах а не на канале.
@@RuslanNumber1 минин перелогинся
Бля, только не уточка, умоляю
Когда мы внутри формы нажимаем enter или ctrl + enter на форме срабатывает событие Submit. Таким образом не нужно через жс делать проверки какие клавиши были нажаты внутри инпута, помимо этого это добавляет accessibility для нашего приложения прилагая меньше усилий
В самом начале видео говорят, о том что этот код не для подражания, он построен из г.. и палок, чтобы походить по граблям
А где вы там форму увидели?
@@vitaliysawyer9305 по html спецификации любой контрол формы должен быть внутри тела форм
@@pashkes, в интернетах пишут обратное. На СтекОверфлоу вопрос 3294572. Извините, что в такой форме привожу ссылку. Иначе комментарий удаляется.
Странно! В начале видео говорится о том, что код написанный просто ужас!!! и его никогда не повторяйте! а в конце автор говорит, "что сегодня мы с вами выучили это, это и это!"
Конечно, одно другому не мешает - то что код ещ' не готов для продакшна, не означает что мы ничему не учимся
Хорошо, что не белочка!
Автор, а зачем ты говоришь что с предыдущего видео вы научились делать то-то) но если это намек, что надо почитать доку, то окей или ощущение, что я пропустил что-то важное
Да, пропустили, домашнее задание в видео 8
А почему сказано что :key в v-for должна быть именно строка? ведь может быть и числовое значение
Число приводится к строке
Если бы я был учителем программирования, то взял бы за основу твои подходы. Очень многое разъяснил. Лайк!
Разве в предыдущих видео было про создание проектов но вью?
Домашнее задание в 8 видео
а откуда взяли индекс и app.css вначале?
ссылка в описании к видео
Илья, спасибо огромное за Ваш труд!
Как будет время, можете, пожалуйста, поделиться какую именно специфичную боль решает Tailwind, когда его лучше использовать в сравнении с другими css фреймворками (Vuetify, UiKit, Bootstrap etc.)? Спасибо.
Коллеги, просветите, а откуда эта история с уточкой пошла изначально?
В плейлисте предыдущие ролики 9шт, там есть объяснение, посмотри)
не работает файл стилей. слишком большой.
Работает :) Вы просто не смотрите туда :) И в следующих версиях это поправлено
Илья, а в каком предыдущем видео была информация по установке вью? Я все подряд посмотрел
смотреть мало :) в 8 видео была инструкция про домашнее задание. как раз тест на тех кто "просто смотрит"
@@JavaScriptNinja Спасибо за ответ) Я смотря 13 урок это понял и нашел уже ответы))
В каком таком "предыдущем видео" ?
8 видео, домашнее задание озвучено в видео и в закреплённом комментарии. Тест на тех кто просто слушает и не пытается выполнить домашку
после ExtJS, Vue - кайф, во всзяком случае пока так кажется ))) с декларациями в ext-е явно переборщили )))
Нужно было показать как получить данные с criptocompare. Абсолютно не понятно как получить css и html файл. Поковырялся на сайте так и не понял как.
зачем линтер ставить на проект как плагин, а потом еще как расширение IDE ? Как они взаимодействуют ?
Расширение IDE отвечает только за то, чтобы рисовать вам сообщения об ошибках. Каждый проект сам на своем уровне настраивает что именно проверять (какие правила) и прочие детали.
@@JavaScriptNinja спасибо )
"отдельные люди" ставят дизлайк
смотрю через 3.5 часа после публикации - дизов ноль ))
Видимо Минин еще не посмотрел 😂
Пока слушаю и получаю одно удвольствие. Споткнулся на запуске примера, но в коментах какой div удалить подсказали и не понял почему ключи нужны там где v-for. Надеюсь дальше ещё про это будет. Может прямо в репозитории этот кусок с div svg animate-spin вырезать?
Да, ещё современный npm запускает локальный сервер командой 'npm run dev'.
Плохо, что про VScode сказали, а про программу, в которой отображается приложение, нет. Не понятно, нужна она или нет, чем можно заменить и вообще, что происходит на 5.25 минуте.
Из комментариев видно, что некоторые люди стопорятся после вставки css(появляется бесконечная загрузка SVG). Удалите, либо просто закомментируйте этот кусок кода, а именно div, в котором лежит SVG.
Большое спасибо за курс!
как найти индекс файл, подскажите пожалуйста, все что я нашел по ссылке это уже готовый app.vue ?
Почему, интересно, вывод значения в фигурных скобках называется интерполяция? У этого слова есть вполне конкретное определение и, кажется, оно не подходит тут для нас.
в языке разметки TAL разные дерективы можно писать в одном теге, там определена последовательность работы каждой из них
Здравствуйте! В видео идет речь о файлах html и css, которые прислали ("нам тут прислали невменяемый css..") и далее они подключаются в src. А где их брать? Буду благодарен, если поясните, что я упустил.
приємні спогади, коли біток був по 47К...))
Если data для динамических данных, куда константы пихать? Например debounce для инпута
в качестве констант можно использовать свойства компонента
@@AlbertMaximov а юзать как? :debounce=“someContst” так можно?
@@OlegGoritsyn ну да, как обычные свойства. Если компонент попытается изменить своё свойство, то Vue выдаст предупреждение
Или в computed, или в $options. Оба варианта мы рассмотрим
жестко про верстальщика на 35:37 ))
плагины eslint prettier и другие на курсе будут изучаться ?
Нет, они же никакого отношения ко vue не имеют
@@JavaScriptNinja это сарказм ?
@@torodinson5260 нет, это же не сарказм
@@ruslanshikhaliev9341 но они же используются
Что-то осталась не понятной разница между применением условия v-if на div и template.
Темплейт не отрисуется в дом элемент, а служит логической обёрткой.
В отличии от дива, который добавится на страницу и может повлиять на стили.
Аналог Fragment в Реакте, кто знает тот знает)
@@johnnyrocket2914 более того аналог documentfragment в html
@@JavaScriptNinja я о document fragment в js узнал недавно, когда читал доки в learn.javascript.ru и подумал, что react вдохновились этим при создании фрагмента. И ещё в js есть и template и я честно говоря не до конца понял его предназначение.
@@JavaScriptNinja Абсолютли)
Секундочку. Материалы под видео нужно читать до или после просмотра видео? А то я смотрю и не вдупляю почти ничего. Все эти директивы, модуляторы, модификаторы потом отдельно рассматриваться будут в курсе?
Как удобно. Мы рассчитываем что после :)
@@JavaScriptNinja а потом самостоятельно работать над приложением не подсматривая в скринкаст ?
@@alimslimmer1751 Это уже тебе решать
@@994gun3 пробовал после, ничего не понятно. Он же опирается на доку
Очень крутой и понятный урок. Спасибо!
Vue.js прям шикарен в плане оживления html шаблона судя по ощущениям пока
счастливо!
Что за шрифт используется в редакторе?
Хорошая информация для старта проекта.
Огромное спасибо за уроки !!!
3:15 из каких предыдущих? Это первое видео с кодом.
Домашнее задание в 8 видео
@@JavaScriptNinja ясно, спасибо
@@JavaScriptNinja здравствуйте, спасибо за ваш труд, но не могли бы вы подсказать откуда найти индексфайл с первоначальной версткой, просто в коммитах его нет, а зайдя в апп.вью уже готовый блок темплэте ? Спасибо заранее
Спасибо за структурированный, понятный курс
Всё очень чётко "понял" что выбирать, пересматривал раз 20. Спасибо
Признаться честно, по началу я пытался повторять. Но потом забил, в этом действительно нету смысла. Тем более, что я +- знал это. Почему, в данном случае важнее, чем как, ну для меня. Смотрим дальше
Самый высокий уровень преподования, который встречал и в вузе, и на степике, и на ютубе, и на курсере
Нет
Да
Один из лучших спикеров
А Vue можно использовать внутри темплейтов твига (twig)?
Красавчик. то чувство, когда чел психанул от плохих курсовна вью и запили свой офигенный!
На одном дыхании, Илья! Спасибо!🤩🥳
33:32 :D
У меня почему то не обновляется автоматически изменения, и даже когда я обновляю страницу со сбросом кеша изменения не видны, редактирую App.vue, вообще конечно после бек-энда ваша экосистема смотриться дико
Видимо vue-cli как то не так тебе hot reload настроил, я бы попробовал заново всё сделать с самого начала, а затем до того как скопируешь html с описания под видео, попробовать изменить какой-нибудь текст в дефолтном app.vue.
Система смотрится дико потому что до того как начать писать код ещё кучу всего надо сконфигурировать (тот же hot reload На стороне сервера вроде как делается) и в основном спустя пару месяцев с выпуска видео версии пакетов меняются и что-то ломается или начинаются конфликты.
Я новичок, не подскажете почему после подключения css, вместо "вуаля" у меня появился кружок ожидания загрузки?
Вот именно
Ты сломал систему, нужно с ТуДу листа начинать )))
Очень крутой выпуск)) Спасибо) информация подается очень четко)
Не совсем понял как мы в filter сравнили два объекта и это сработало? Ведь {} === {} // false
Потому что это на САМОМ деле ттот же объект
Краса неймовірна!👍
Из какого видео мы знаем, как создавать vue cli? Не могу найти
8 видео, дз в комментариях
Класс!!! Молодца!!!!
Тэйлвинд кстати норм тема, +9000 к скорости вёрстки)
Только начал, спасибо за уроки) всё понятно)
вроде все хорошо, но макет сделан на бутстрапе, в результате куча в элементах атрибутов, классы элементов не понятны кто есть кто и ты теряешься в макете совершенно, это досадно, но думаю конечно привыкну, но пока тяжело
это не бутстрап