Отличнейшие уроки! Я начала понимать логику vue , благодаря Вашим грамотным комментариям всех действий. Создаем компонент, импортируем его, регистрируем его, используем его ! надо передать данные в компонент, то делаем это через props . Самое то, что надо для старта во vue. Спасибищеееее!!!!!!
Я конечно дико извиняюсь. Может он просто хотел показать все возможности, и я понимаю что знаю гораздо меньше чем автор. Но писать всю логику в корневом app и импортировать в компоненты только готовые данные, это ж дикость какая то. Зачем тогда в компонентах 3 поля придумали? Пиши тогда всю логику в js файле а стили в css. Но блин в корневом компоненте. Он на то и корневой, что управляет всем, там вообще ничего не должно быть практически. А компоненты- самостоятельные сущности. Они могут получать данные, методы, но роботпть кмк должны сами.
Господа, никакого кликбейта, все основные темы разобраны) Добавляйте меня в VK: vk.com/vladilen.minin Содержание: 0:22 Что такое Vue 0:50 Как установить Vue 3:20 Обзор проекта 5:14 Как работает проект 5:57 Как работают файлы .vue 7:12 Что такое компоненты 11:50 Создание данных 12:48 Передача параметров в компонент 14:05 Итерация массивов с v-for 15:40 Валидация параметров 17:58 Работа со стилями 20:17 Динамические классы 21:13 Добавление событий 23:57 Работа с методами 25:50 Работа с формами 28:11 Работа с моделями с v-model 32:57 Жизненный цикл (mounted) 33:15 Работа с сервером 34:41 Мультистраничность с Vue Router 40:11 Как работает v-if 41:00 Добавление компонента loader 44:00 Фильтры 45:58 Computed свойства
@@Rock-fh1hp то же проблема с v-for была? Если да, то объясню они добавили еще одну обязательную директиву при использовании цикла, это v-bind:key так что компонент который будет итерироваться из массива должен выглядеть так :
Спасибо, отличный урок! НО небольшой совет ( или личное пожелание, для ОБЩЕГО удобства ) автору : когда по коду ( ну и по комментариям видео ) встречаются ОДИНАКОВЫЕ названия - todo-todo / todos-todos / И ПРИ ЭТОМ САМ АВТОР НАПОМИНАЕТ, ЧТО одно название - ПРОИЗВОЛЬНОЕ ( т.е. ВЫБИРАЕМ в этот конкретный момент !!! ), а другое - УЖЕ СУЩЕСТВУЮЩЕЕ на этот момент НАЗВАНИЕ массива или объекта ( т.е НЕЛЬЗЯ изменить без ошибки в коде ) , - НАМНОГО УДОБНЕЕ БУДЕТ если ПРОИЗВОЛЬНОЕ НАЗВАНИЕ НЕ будет ТАКИМ ЖЕ как и "НЕПРОИЗВОЛЬНОЕ" - ... Если идут одинаковые названия - реально какая-то часть времени уходит на постоянное напоминание себе - где в этих парах какое название ( СТОП ! Я понимаю - что любое название изначально - произвольное)), НО - думаю автор поймет о чем я, т.к. сам отличает эти названия по этому критерию по ходу видео) спасибо.
Я здесь после год работы в риакте, мне было очень понятно ваша речь, многие схожие места есть с риактом, но здесь как-то более понятно новичкам, спасибо вам огромное
Как всегда всё доступно и понятно, без лишней воды. Сделай видео, где используются какие-нибудь приёмы из реальных проектов на VueJs или реализация каких-нибудь фич из реальных проектов.
Я видел много материалов по Vue (в том числе и платные), но это лучшее объяснение для начинающих, какое может только быть!)) Владилен - БРАВО! Вы переплюнули даже сами себя!)
Влад, ты не представляешь как сильно, помогаешь людям. Когда у меня будут спрашивать кто тебя учил, я буду отвечать "мой сенсей Владилен Минин" . Настолько полезный урок, что я начал скачивать видео чтоб не потерять.
Смотрел много разных уроков на разные темы, но ты наверное лучший! Все по делу, без воды, не повторяешь одно и то же по 10 раз, а так же не считаешь своих подписчиков полными тупезнями, которых в начале видео нужно обучать алфавиту.
А мне, к сожалению, не понравилось. Можно было бы отделить мух от котлет и называть бесконечные todo/todos как-то иначе, чтобы было четче видно, что откуда читается. Также, например, вы не сказали, что props - массив атрибутов компонента. Эти три слова объяснили бы все, и не нужно было бы тыкать туда-сюда. Я не сразу понял смысл этого свойства. Как вы объяснили структуру тега TodoItem v-for v-bind - вообще песня. Почему-то не посчитали нужным объяснить, что там todo, что - todos. И я так и не понял, зачем в App.vue экспортировать компонент TodoList, и где используется декларированное при этом свойство components. Является ли оно специфичным для Vue, JS, или его имя выбрано произвольно.
Привет Владилен! Большое спасибо за видео. Сегодня в 2022, просматривая этот туториал, правя параллельно вещи, которые у тебя работают (у тебя версии пакетов ниже, и линтер видимо слабее), удалось понять основные принципы, при переходе с 4 лет ангуляра. Спасибо!
Для тех у кого не работает Emmet в VS Code во .vue следующее решение. Нажать F1 найти файл settings.json и добавить строки "emmet.includeLanguages": { "vue": "html" }
Добавил данную строку но это не помогло, в начале все строки файлов *.vue были чисто белыми, после чего добавил расширение - Vetur. После добавление строки+расширения emmet заработал как нужно. Спасибо.
Очень понятно рассказал, спасибо за урок! После просмотра появилась мотивация повторить. Сразу видно когда профи выполняет свою работу приятно смотреть.
Пожалуйста, когда делаете туториал, не называйте все переменные одним словом todo, потому что новичку очень сложно разобраться, что куда идет. Назовите todoProperty ну хоть как-нибудь, но по-другому. Досмотрела до 16 минуты и не смогла продолжить, потому что не работало, а в туториале работало... Помог знакомый. Вот мой вариант написания цикла for: .
@@vladislavmac жутко бесит, согласен. Вообще программеры живут в своем мире и не понимают, что в голове у новичка. Каждые 10 минут видео надо делать отступление и объяснять план действий.
Страшно сказать, сколько туторов на ютубе я за жизнь успел посмотреть, так что смело скажу, что видео действительно полезное, насыщенное и интересное для старта. Респект!
Добрый день! Спасибо огромное за видео, очень кратко и информативно все) Я правда в конце думал, что баг с обнулением значения чекбокса при фильтринге будет еще пофикшен, поэтому концовка видео для меня оказалась несколько внезапной:)))
Есть баг с input в TodoItem. Когда подгружаются данные с сервера, чекбоксы для завершенных и зачеркнутых todo отображаются как неотмеченные, без галки. Лучше использовать v-model="todo.completed" вместо @change="todo.completed = !todo.completed".
Спасибо большое за видео, понадобилось быстро войти во вью после многолетней работы с Angular и частично React. Твоё видео первое в выдаче по запросу "vue js за 5 минут", всё моментально ясно, пошёл работать))
Благодарю за видео, мне как начинающему знакомство с Vue оказалось крайне полезно! На будущее - исходники лучше выкладывать на Github, там все сделано для удобной работы с кодом. У меня есть пару вопросов, один из них как раз из текущего проекта на Vue: 1. Какой смысл делать «компонент в компоненте»? По идее весь этот список можно было вывести в одном TodoList через v-for. Если в приложении много списков, то это дополнительная кипа файлов. 2. У меня есть компонент в котором есть несколько input и вывод checkbox’ов. Как только я отмечаю чекбокс, у меня сбрасывается только что введенное значение в input. Как только я заменил :value на v-model с 2-сторонним связываением, input-ы перестали сбрасываться. Я ранее грешил на vue-fragment и даже создал issue там, но причина оказалась не в нем (код по ссылке): github.com/y-nk/vue-fragment/issues/30 Это нормальное поведение? Могу я как-то работать без 2-стороннего связывания чтобы input значения не сбрасывались?
Привет На гитхаб не выгладывал, потому что будет много репозиториев, потом будет сложно ориентироваться, там я храню только основные 1. Исключительно демонстрационный, это учебное приложение 2. Для чекбоксов нужно делать :checked, я уже после записи заметил эту мелкую недоработку)
Спасибо, весь контент на канале очень помогает развиваться как разработчику, на данный момент нужен Vue и все, что есть на канале о Vue это просто кладезь ценнейшей информации!
@@dezu805 это достаточно распространенная практика в обучающих видео и книгах, называть какие-то переменные, массивы, классы, объекты, элементы максимально одинаково, из-за чего новичкам достаточно трудно понять, что вообще происходит и в чем отличие одного от другого. Когда я начинал разбираться в программировании, часто не мог понять элементарных вещей именно по этой причине. Такое впечатление, что это делают специально ))) В результате, конечно, разобрался, но уверен, что некоторые моменты освоил бы гораздо быстрее, если бы авторы обучающего материала не стремились иной раз специально запутать человека, который только приступает к изучению.
Очень понятно и доходчиво, до начиная с роутов уже не актуально, долго смотрел в чем проблема, потом психанул и скачал архив и вставил просто в свой проект, но все равно так же ошибка(связанная с Vue.use(Router))
Если у кого-то такая ошибка: Expected to return a value in "filteredTodos" computed property. То просто в конце вашего computed-свойства напишите return this.todos и удалите первый if, с этим возвращением. Это ругается EsLint на то что computed свойство должно что-то ретюрнуть по умолчанию
Столкнулся с проблемой eslint мутации при прямом переназначении событий. Для тех кто не знает, нужно переназначить приходящие пропсы в новой data. Для наглядности: export default { props: { todo: { type: Object, required: true } }, data () { return { $todo: this.todo // Здесь переназначаем пропс } } } Таким образом eslint не будет ругаться на мутацию
Невероятно. Я только что, не ставив себе цель "Научиться программировать на Vue", научился программировать на Vue. Аааааааааааааааа. Вот как??? Как ты это сделал? Мне было скучно, я залез в ютуб, чтобы убить время, но время я по сути не убил, это был максимально полезный час отдыха в моей жизни... Сам урок сделан великолепно, всё поэтапно разобрано. Думаю после этого видео, любую недосказанность можно будет легко найти в документации... Благодарю. Если вдруг придёт идея обучить какому-нибудь ещё фреймворку за час, осуществите её, я нажал колокольчик и уже жду
Возможно ошибка из-за конфликта версий. Я так пофиксил: 1. изменил vue-router в package.json: "vue-router": "^3.0.0", 2. удалил папку node_modules 3. npm i 4. npm run serve
Для тех, для кого проблема с ошибкой "Unexpected side effect in "filteredTodos" computed property" еще актуальна: В свойстве computed мы не имеем права мутировать оригинальные данные, что мы делаем методом filter. Решение: 1. Переносим наш метод с "computed" в свойство "methods". Метод я переименовал в "filterTodos" 2. Внутри функции создаем переменную "filteredTodos" и по условию присваиваем ей новый результат. В конце возвращаем его. filterTodos() { let filteredTodos; if(this.selected === 'all') { filteredTodos = this.todos } else if(this.selected === 'completed') { filteredTodos = this.todos.filter(function(todo) { return todo.completed }) } else if(this.selected === 'not-completed') { filteredTodos = this.todos.filter(function(todo) { return !todo.completed }) } return filteredTodos; } 3. В теге "select" обращаемся к методу @change="filterTodos" 4. Так же не забываем заменить в переборе наших v-for= "todo in todos" на v-for="todo in filterTodos()"
Какая жесть эти современные технологии... Спасибо за видео! Где можно посмотреть, как это работает внутри? Насколько это быстро? Можно ли писать реальные большие Enterprise решения на таких современных фреймворках?
невероятный фреймворк, я влюбился в него! после изучения React JS, я нацелен на Vue. Будут ли еще уроки по Vue JS? Ты очень хорошо преподносишь курсы, спасибо.
И вот если вы не уберёте до трёх строчек количество пунктов ToDo, а там где уже завершённые попробуете поставить галочку, то он наоборот снимет completed, т.е. галочка будет работать неверно. Для этого предлагаю заменить строчку на и будет нам счастье...
Та вроде насколько я слышал из старого синтаксиса совсем выкинут только миксины. В любом случае к тому времени пока 3 версия станет повсеместно использоваться ещё довольно много времени пройдет. Вот есть люди которые на AngularJs ещё лобают хотя его не поддерживает гугл уже.
Спасибо, довольно интересно. Правда на самом деле не понял логику самого подхода, тоесть изначально когда затевался node.js идея была в том чтоб использовать один язык для сервера и фронта насколько я понял, а vue это как я понимаю фреймворк который работает на node.js? И в итоге тут используется абсолютно левый синтаксис, который настолько же js,насколько и любой другой язык разработки. Запутался в общем...
Отличнейшие уроки! Я начала понимать логику vue , благодаря Вашим грамотным комментариям всех действий. Создаем компонент, импортируем его, регистрируем его, используем его ! надо передать данные в компонент, то делаем это через props . Самое то, что надо для старта во vue. Спасибищеееее!!!!!!
Я конечно дико извиняюсь. Может он просто хотел показать все возможности, и я понимаю что знаю гораздо меньше чем автор. Но писать всю логику в корневом app и импортировать в компоненты только готовые данные, это ж дикость какая то. Зачем тогда в компонентах 3 поля придумали? Пиши тогда всю логику в js файле а стили в css. Но блин в корневом компоненте. Он на то и корневой, что управляет всем, там вообще ничего не должно быть практически. А компоненты- самостоятельные сущности. Они могут получать данные, методы, но роботпть кмк должны сами.
@@amztrainer4525 так и в чем твой поинт? Как сделать лучше?
Господа, никакого кликбейта, все основные темы разобраны)
Добавляйте меня в VK: vk.com/vladilen.minin
Содержание:
0:22 Что такое Vue
0:50 Как установить Vue
3:20 Обзор проекта
5:14 Как работает проект
5:57 Как работают файлы .vue
7:12 Что такое компоненты
11:50 Создание данных
12:48 Передача параметров в компонент
14:05 Итерация массивов с v-for
15:40 Валидация параметров
17:58 Работа со стилями
20:17 Динамические классы
21:13 Добавление событий
23:57 Работа с методами
25:50 Работа с формами
28:11 Работа с моделями с v-model
32:57 Жизненный цикл (mounted)
33:15 Работа с сервером
34:41 Мультистраничность с Vue Router
40:11 Как работает v-if
41:00 Добавление компонента loader
44:00 Фильтры
45:58 Computed свойства
Владлена, походу этот ролик уже не актуален.
@@Rock-fh1hp почему???
@@Rock-fh1hp то же проблема с v-for была?
Если да, то объясню они добавили еще одну обязательную директиву при использовании цикла, это v-bind:key
так что компонент который будет итерироваться из массива должен выглядеть так :
@@skylive_skl спасибо большое!
ребят
у кого была проблема с чекбоксами и селектом? плиз, напишите кто сможет помочь
не могу понять где проблема
Годнота. На работе прилетели таски по вью, это видео - то что нужно для быстрого старта работы с фреймворком.
Самое лучшее видео из серии "что то за час")))
Благодарю, я старался)
Включил х2, выучил Vue за 25 минут)
И тут же забыл😁😁
Это очень смешно))
и забудешь с х2 скоростью
@@aerahtv0000 не запомнит
попробую на х4 ))))
Не люблю видосы продолжительностью больше 20 минут,но это божественно,на одном дыхании
У меня таких целый плейлист)
Спасибо, отличный урок! НО небольшой совет ( или личное пожелание, для ОБЩЕГО удобства ) автору : когда по коду ( ну и по комментариям видео ) встречаются ОДИНАКОВЫЕ названия - todo-todo / todos-todos / И ПРИ ЭТОМ САМ АВТОР НАПОМИНАЕТ, ЧТО одно название - ПРОИЗВОЛЬНОЕ ( т.е. ВЫБИРАЕМ в этот конкретный момент !!! ), а другое - УЖЕ СУЩЕСТВУЮЩЕЕ на этот момент НАЗВАНИЕ массива или объекта ( т.е НЕЛЬЗЯ изменить без ошибки в коде ) , - НАМНОГО УДОБНЕЕ БУДЕТ если ПРОИЗВОЛЬНОЕ НАЗВАНИЕ НЕ будет ТАКИМ ЖЕ как и "НЕПРОИЗВОЛЬНОЕ" - ... Если идут одинаковые названия - реально какая-то часть времени уходит на постоянное напоминание себе - где в этих парах какое название
( СТОП ! Я понимаю - что любое название изначально - произвольное)), НО - думаю автор поймет о чем я, т.к. сам отличает эти названия по этому критерию по ходу видео) спасибо.
Владилен, привет. 5 часов разбирал до молекул. Спасибо. У тебя столько материала, что последнюю задачу по js просто не успеваю начать. Очень круто.
Знал бы ты сколько материала еще в голове есть, времени бы хватало все записывать)
Благодарю за отзыв!
Да вообще одни из лучших уроков и курсов. Владилен, продолжай в том чже духе, ты лучший!
Благодарю за отзыв)
Это потрясающе! Это супер-качественно потраченный час в жизни!
лучше чем секс с девушкой?
@@talas12341 Целый час ???? Пфф, хватит ей и 10 минут. Оставшиеся 50 минут лучше потратить на vue ) Правда где потом гику новую девушку искать )
@@talas12341 даже лучше чем с мужчиной
потратил гораздо больше часа, т.к. набирал код попутно, офигенно
Я здесь после год работы в риакте, мне было очень понятно ваша речь, многие схожие места есть с риактом, но здесь как-то более понятно новичкам, спасибо вам огромное
Быстро, понятно и ничего лишнего. Благодарю за урок !
Как всегда всё доступно и понятно, без лишней воды. Сделай видео, где используются какие-нибудь приёмы из реальных проектов на VueJs или реализация каких-нибудь фич из реальных проектов.
Так я целый курс же выпускают с такими штуками по Vue) Там только элементы из реальных приложений!
Я видел много материалов по Vue (в том числе и платные), но это лучшее объяснение для начинающих, какое может только быть!))
Владилен - БРАВО! Вы переплюнули даже сами себя!)
Влад, ты не представляешь как сильно, помогаешь людям. Когда у меня будут спрашивать кто тебя учил, я буду отвечать "мой сенсей Владилен Минин" . Настолько полезный урок, что я начал скачивать видео чтоб не потерять.
Чтобы при применении фильтра не сбрасывалось значение checkbox стоит заменить:
на
Спасибо тебе огромное Владилен, ты самый лучший, ты и Петриченко. Я вас обоих просто обожаю.
Смотрел много разных уроков на разные темы, но ты наверное лучший! Все по делу, без воды, не повторяешь одно и то же по 10 раз, а так же не считаешь своих подписчиков полными тупезнями, которых в начале видео нужно обучать алфавиту.
12:29 - Все что нужно для жизни разработчику.
Просто, доступно, понятным языком. Контент топовый и как всегда очень высокого качества, за что огромное спасибо!
Видео - огонь!! Все по делу и супер понятно изложено, без воды и лишних слов. Спасибо, Владилен, подписалась!)
Спасибо, делаю тестовое задание благодаря тебе)
Как будто полгода учил Vue, хотя только час посмотрел))
А мне, к сожалению, не понравилось.
Можно было бы отделить мух от котлет и называть бесконечные todo/todos как-то иначе, чтобы было четче видно, что откуда читается. Также, например, вы не сказали, что props - массив атрибутов компонента. Эти три слова объяснили бы все, и не нужно было бы тыкать туда-сюда. Я не сразу понял смысл этого свойства. Как вы объяснили структуру тега TodoItem v-for v-bind - вообще песня. Почему-то не посчитали нужным объяснить, что там todo, что - todos.
И я так и не понял, зачем в App.vue экспортировать компонент TodoList, и где используется декларированное при этом свойство components. Является ли оно специфичным для Vue, JS, или его имя выбрано произвольно.
да уж пиздец непонятно
Комментарии видны. Я не перестаю себе говорить, что если бы не ты я бы сломался. Спасибо. Копать и копать твои уроки и пересматривать
Мне очень приятно, что мой материал так работает. Это воодушевляет на создание еще более качественного и интересного контента
Я работаю на реальным проектом, уже смотрю будет жестко
@@dan.gorbunov Ты имеешь ввиду, что сложно?
Если есть какие то темы, что не понятны, дай знать в ВК, подумаю, как их осветить
Vladilen Minin хорошо, напишу. Спасибо за ответ и поддержку.
Привет Владилен! Большое спасибо за видео. Сегодня в 2022, просматривая этот туториал, правя параллельно вещи, которые у тебя работают (у тебя версии пакетов ниже, и линтер видимо слабее), удалось понять основные принципы, при переходе с 4 лет ангуляра. Спасибо!
Для тех у кого не работает Emmet в VS Code во .vue следующее решение. Нажать F1 найти файл settings.json и добавить строки
"emmet.includeLanguages": {
"vue": "html"
}
красава
Добавил данную строку но это не помогло, в начале все строки файлов *.vue были чисто белыми, после чего добавил расширение - Vetur. После добавление строки+расширения emmet заработал как нужно. Спасибо.
Спасибо за ультра мощный обзор)
Это не хауди обзор))
Со знаниями реакта заходит очень хорошо!
Thank you)
А мне наоборот после Реакт, кажется слишком много лишней писанины, и немного Vue отстраняет разработчика от javascripta.
Очень понятно рассказал, спасибо за урок!
После просмотра появилась мотивация повторить.
Сразу видно когда профи выполняет свою работу приятно смотреть.
Не ну это подписка на канал, на работе таски по вью+лара закинули, видос особо годный, быстро четко и без воды, все как я люблю
Добро пожаловать)
Найти что-то такого уровня на ютубе даже не мечтал, спасибо большое)
Благодарю, приятно)
Спасибо за видео, очень полезно и без воды. Сразу видно автор хорошо понимает технологию - респект =)
Это лучшее видео для того чтобы начать осваивать vue, всё что нужно и ничего лишнего. Спасибо огромное, пошел писать свой тудулист =)
Пожалуйста, когда делаете туториал, не называйте все переменные одним словом todo, потому что новичку очень сложно разобраться, что куда идет. Назовите todoProperty ну хоть как-нибудь, но по-другому. Досмотрела до 16 минуты и не смогла продолжить, потому что не работало, а в туториале работало... Помог знакомый. Вот мой вариант написания цикла for: .
Владилен так любит делать, такие переменные ставит по всюду что чёрт ногу сломет
@@vladislavmac жутко бесит, согласен. Вообще программеры живут в своем мире и не понимают, что в голове у новичка. Каждые 10 минут видео надо делать отступление и объяснять план действий.
@@vladislavmac не нравится не смотри
@@SlavikPro1998 Я и не смотрю) Я искал годные видео по Vue. Увидел это и зашёл посмотреть как людей обманывают и все :)
Он всё верно делает)) потом поймёте) я согласен, что по началу это путает.
Страшно сказать, сколько туторов на ютубе я за жизнь успел посмотреть, так что смело скажу, что видео действительно полезное, насыщенное и интересное для старта. Респект!
ругается 4:49 error Unexpected mutation of "todo" prop vue/no-mutating-props
Нашел в чем проблема?
@@andreyfrolov7515 нет
так и не нашел? тоже столкнулся
Выражаю вам свою благодарность за подобного рода подачу материала!
Владилен, огромное спасибо! Было бы круто увидеть от вас такой же видос об Vue Route как и о Vuex!
Добрый день! Спасибо огромное за видео, очень кратко и информативно все) Я правда в конце думал, что баг с обнулением значения чекбокса при фильтринге будет еще пофикшен, поэтому концовка видео для меня оказалась несколько внезапной:)))
Я потом уже заметил, что там мелкий баг был, но в твоих силах его поправить самому)
Не получилось исправить этот баг?) не могу понять как подобраться к индексу...)
Есть баг с input в TodoItem. Когда подгружаются данные с сервера, чекбоксы для завершенных и зачеркнутых todo отображаются как неотмеченные, без галки. Лучше использовать v-model="todo.completed" вместо @change="todo.completed = !todo.completed".
Спасибо большое за видео, понадобилось быстро войти во вью после многолетней работы с Angular и частично React. Твоё видео первое в выдаче по запросу "vue js за 5 минут", всё моментально ясно, пошёл работать))
Благодарю за видео, мне как начинающему знакомство с Vue оказалось крайне полезно! На будущее - исходники лучше выкладывать на Github, там все сделано для удобной работы с кодом.
У меня есть пару вопросов, один из них как раз из текущего проекта на Vue:
1. Какой смысл делать «компонент в компоненте»? По идее весь этот список можно было вывести в одном TodoList через v-for. Если в приложении много списков, то это дополнительная кипа файлов.
2. У меня есть компонент в котором есть несколько input и вывод checkbox’ов. Как только я отмечаю чекбокс, у меня сбрасывается только что введенное значение в input. Как только я заменил :value на v-model с 2-сторонним связываением, input-ы перестали сбрасываться. Я ранее грешил на vue-fragment и даже создал issue там, но причина оказалась не в нем (код по ссылке): github.com/y-nk/vue-fragment/issues/30 Это нормальное поведение? Могу я как-то работать без 2-стороннего связывания чтобы input значения не сбрасывались?
Привет
На гитхаб не выгладывал, потому что будет много репозиториев, потом будет сложно ориентироваться, там я храню только основные
1. Исключительно демонстрационный, это учебное приложение
2. Для чекбоксов нужно делать :checked, я уже после записи заметил эту мелкую недоработку)
Спасибо, весь контент на канале очень помогает развиваться как разработчику, на данный момент нужен Vue и все, что есть на канале о Vue это просто кладезь ценнейшей информации!
Спасибо, информативно ! Так держать Владилен ! 👍
Огромное спасибо! очень доступно)! Желаю успехов каналу!
У кого есть проблема с v-for, вот решение: v-for=“todo in todos” :key=“todo”
С версии 2.2.0 v-for без key не работает.
Спасибо тебе
Туду, туду, туду, тудус, уух... Аж смешно стало, когда начал обращать внимание
на одном из таких моментов сильно запутался и выключил данное видео. разобрался уже у другого автора
@@dezu805 и я тоже... автор предельно запутал вобще-то довольно ясные вещи
@@dezu805 это достаточно распространенная практика в обучающих видео и книгах, называть какие-то переменные, массивы, классы, объекты, элементы максимально одинаково, из-за чего новичкам достаточно трудно понять, что вообще происходит и в чем отличие одного от другого. Когда я начинал разбираться в программировании, часто не мог понять элементарных вещей именно по этой причине. Такое впечатление, что это делают специально ))) В результате, конечно, разобрался, но уверен, что некоторые моменты освоил бы гораздо быстрее, если бы авторы обучающего материала не стремились иной раз специально запутать человека, который только приступает к изучению.
@@phat80 Вот, блин в точку! Им все понятно, а мы тупые. И всё афигеть как просто! (для них)
@@viktoryakovenko757 кто мы, если ты тупой, то че к себе других тянешь...?
Огонь! Продолжай в том же духе. Очень круто и полезно.
Огромное спасибо за это видео, только начал работать с Vue.js и ролик оказался очень полезным для ознакомления с базовыми вещами во Vue.
использование todo для различных элементов сильно усложняет восприятие материала для таких новичков как я, а ведь это видео как раз для них
Не знаю, каково это смотреть с нуля (думаю, что смотреть и сразу делать - отлично)
Но и в качестве повторения тоже отлично зашло, спасибо! 👏🏻
Очень понятно и доходчиво, до начиная с роутов уже не актуально, долго смотрел в чем проблема, потом психанул и скачал архив и вставил просто в свой проект, но все равно так же ошибка(связанная с Vue.use(Router))
Если у кого-то такая ошибка: Expected to return a value in "filteredTodos" computed property. То просто в конце вашего computed-свойства напишите return this.todos и удалите первый if, с этим возвращением. Это ругается EsLint на то что computed свойство должно что-то ретюрнуть по умолчанию
Очень хороший урок, разложено по полочкам. Спасибо большое!
Очень хорошо. Кратко и понятно . Автору респект
Большое спасибо за видео, лучшее из серии подобных "освой физику за час" )
Владилен, вы молодец. Очень крутой контент пилите, очень понятно объясняете
Формат крутой. Как бы все знаешь, а нет... куча мелочей. Спасибо
В этом и была идея, показать базовый функционал, но напичкать его мелочами)
Благодарю! очень интересно учиться по вашим урокам!
Столкнулся с проблемой eslint мутации при прямом переназначении событий. Для тех кто не знает, нужно переназначить приходящие пропсы в новой data. Для наглядности:
export default {
props: {
todo: {
type: Object,
required: true
}
},
data () {
return {
$todo: this.todo
// Здесь переназначаем пропс
}
}
}
Таким образом eslint не будет ругаться на мутацию
Артем Красава!
Артем, спасибо!
Спасибо. Все понятно и профессионально рассказано.
04:48 Я купил себе приложение Magnet из App Store и вручную так теперь не растягиваю окна, очень удобно 👍🏻
Подскажите пожалуйста, как в vs-code сделать чтобы при наборе v- высвечивались подсказки v-on и тд ?
ОГРОМНОЕ СПАСИБО! Никак не мог перейти с чистого js на фреймворки!!
Ну, и как самочувствие ?
Супер, единственное замечание про фильтры, лучше делать через computed так как фильтры выпилят в 3й версии если я не путаю.
Невероятно. Я только что, не ставив себе цель "Научиться программировать на Vue", научился программировать на Vue. Аааааааааааааааа. Вот как??? Как ты это сделал? Мне было скучно, я залез в ютуб, чтобы убить время, но время я по сути не убил, это был максимально полезный час отдыха в моей жизни...
Сам урок сделан великолепно, всё поэтапно разобрано. Думаю после этого видео, любую недосказанность можно будет легко найти в документации...
Благодарю.
Если вдруг придёт идея обучить какому-нибудь ещё фреймворку за час, осуществите её, я нажал колокольчик и уже жду
Благодарю за отзыв)
Глянь на канале плейлист быстрые курсы, тут такого много)
@@VladilenMinin уже нашел, твой канал - это чудо, как и ты)
Замечательный туториал! Сразу все понятно и, главное, быстро :)
Спасибо большое. Подача материала на высоте!!!
Выдает ошибку "Uncaught TypeError: Cannot read properties of undefined (reading 'use')" на момент добавление Router. Кто-то знает в чем проблема?
Возможно ошибка из-за конфликта версий. Я так пофиксил:
1. изменил vue-router в package.json: "vue-router": "^3.0.0",
2. удалил папку node_modules
3. npm i
4. npm run serve
@@maxtantsura гений, тебя ждёт большое будущее в программировании
@@egorbystrov9770 рад, что мой комент оказался полезным! 👍🏻
@@maxtantsura спасибо! еще я версию вью изменил на "vue": "^2.6.10"
как всегда шикарно, спасибо большое за видео!
Еще не начал смотреть но уже поставил лайк!
Однозначно лайк. Многие шорткаты IDE не знал. Я бы еще рассказал за миксины.
Четко, емко и по делу. Супер!!!
Спасибо за видео! Тем кто досмотрел до конца есть челлендж: вынести в компоненты тег select и сделать так чтобы все работало. (я смог)
Как по мне это уже перебор)
Лучше пусть создадут новый компонент, который позволит редактировать уже существующие элементы
30:30. id не генерируется случайным образом, это количество секунд от 01.01.1970, если не путаю
timestamp называется, да
Для тех, для кого проблема с ошибкой "Unexpected side effect in "filteredTodos" computed property" еще актуальна:
В свойстве computed мы не имеем права мутировать оригинальные данные, что мы делаем методом filter.
Решение:
1. Переносим наш метод с "computed" в свойство "methods". Метод я переименовал в "filterTodos"
2. Внутри функции создаем переменную "filteredTodos" и по условию присваиваем ей новый результат. В конце возвращаем его.
filterTodos() {
let filteredTodos;
if(this.selected === 'all') {
filteredTodos = this.todos
}
else if(this.selected === 'completed') {
filteredTodos = this.todos.filter(function(todo) {
return todo.completed
})
}
else if(this.selected === 'not-completed') {
filteredTodos = this.todos.filter(function(todo) {
return !todo.completed
})
}
return filteredTodos;
}
3. В теге "select" обращаемся к методу @change="filterTodos"
4. Так же не забываем заменить в переборе наших v-for= "todo in todos" на v-for="todo in filterTodos()"
Большое спасибо! Этот экспресс-курс очень помог быстро разобраться))
Если у кого вываливается ошибка Failed to compile. на этапе import TodoItem from './components/TodoItem' измените на './TodoItem'
сразу видно человек не парится с названием переменных итд, назвал все to do и збс)
Кто-нибудь видит мой комментарий с содержанием?🤔
Его видно только если изменить порядок сортировки на "Сначала новые"
@@LauncherThe Благодарю, вроде теперь починил и его видно всегда
@@VladilenMinin Не видно
Дамир Шагаев а сейчас? Что то не могу понять в чем причина
@@VladilenMinin Вот сейчас видно
Точно я же за пивом собирался. Пойду за пивом) Спасибо за видос)
Вспомнил как летом React у тебя на канале, тогда тоже лист-задач делали и точно также всё. Ностальгия) Сижу и сравниваю React и Vue.
даёшь китайский язык за час!!!
Хорошее и доступное объяснение.
Однако, не лучше ли было бы в filteredTodos использовать switch вместо того, чтобы городить ифы?
Владилен, аплодирую стоя. Адски благодарю за науку :3
Очень понравился курс, появилось сильное желание и дальше изучать Vue.js :)
Отличный курс, за час прям всё стало понятно.
Ещё бы такой уже курс по React бы
На канале
Владилен топчик, Пили больше!
🙏
Какая жесть эти современные технологии... Спасибо за видео! Где можно посмотреть, как это работает внутри? Насколько это быстро? Можно ли писать реальные большие Enterprise решения на таких современных фреймворках?
невероятный фреймворк, я влюбился в него!
после изучения React JS, я нацелен на Vue.
Будут ли еще уроки по Vue JS?
Ты очень хорошо преподносишь курсы, спасибо.
Зайди во вкладку сообщество. Там сюрприз
@@VladilenMinin 😱😱😱😱😱😱
спасибо, Владилен!
вот на эту строчку ругается eslint ... Custom elements in iteration require 'v-bind:key' directives. Кто знает почему?
Спасибо за урок, очень доходчиво
Очень полезное видео, делая по аналогии на практике, за пару часов вполне можно освоить азы vue.js
пожалуй вернусь к этому видео когда начну хоть что-то понимать во Vue
И вот если вы не уберёте до трёх строчек количество пунктов ToDo, а там где уже завершённые попробуете поставить галочку, то он наоборот снимет completed, т.е. галочка будет работать неверно.
Для этого предлагаю заменить строчку
на
и будет нам счастье...
гуд )
Здорово, спасибо
Мне не хватило только примера как собрать проект
В двух словах объясните пож, что такое "export default { }". Я так понимаю это какой-то основной объект(self) для тэга ?
Курс на Udemy будет? Есть смысл учить Vue 2, если в 3-й версии поменяется синтаксис и вообще вью переформатируется больше в React?
Та вроде насколько я слышал из старого синтаксиса совсем выкинут только миксины. В любом случае к тому времени пока 3 версия станет повсеместно использоваться ещё довольно много времени пройдет. Вот есть люди которые на AngularJs ещё лобают хотя его не поддерживает гугл уже.
Очень круто спасибо, слушаешь на одном дыхание
Владилен, спасибо огромное :-)
Спасибо, довольно интересно. Правда на самом деле не понял логику самого подхода, тоесть изначально когда затевался node.js идея была в том чтоб использовать один язык для сервера и фронта насколько я понял, а vue это как я понимаю фреймворк который работает на node.js? И в итоге тут используется абсолютно левый синтаксис, который настолько же js,насколько и любой другой язык разработки. Запутался в общем...