![Лукьянов Артём](/img/default-banner.jpg)
- 10
- 149 324
Лукьянов Артём
Russia
เข้าร่วมเมื่อ 24 เม.ย. 2019
Привет, меня зовут Лукьянов Артём и я веб разработчик. Начал изучать веб в начале зимы 2019 года.
Также я немного дизайнер. :)
На этом канале я по возможности буду делиться с вами своим опытом и просто записывать полезные видео.
Будут вопросы - пишите!
Также я немного дизайнер. :)
На этом канале я по возможности буду делиться с вами своим опытом и просто записывать полезные видео.
Будут вопросы - пишите!
Drag and Drop на Vue 3 / Уроки Vue
Проект из видео: github.com/ksydex/videos/tree/master/Vue/2.%20Drag%20and%20drop%20Vue3
HTML Drag and Drop API: developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
HTML Drag and Drop API: developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
มุมมอง: 21 005
วีดีโอ
Изучаем React hooks - useEffect / React практика
มุมมอง 1.4K3 ปีที่แล้ว
Проект из видео: github.com/ksydex/videos/tree/master/React/2. useEffect hook practice Предыдущее видео - практика useState: th-cam.com/video/xLwHGFN8AWQ/w-d-xo.html Документация по useEffect: ru.reactjs.org/docs/hooks-reference.html#useeffect Про императивное программирование: en.wikipedia.org/wiki/Imperative_programming
Todo app (список задач) на Vue 3 + Composition API / Vue практика
มุมมอง 14K3 ปีที่แล้ว
Проект из видео: github.com/ksydex/videos/tree/master/Vue/1. Vue3 todo app Про Vite: v3.vuejs.org/guide/installation.html#vite Про Composition API: v3.vuejs.org/api/composition-api.html#composition-api
useState на примере списка задач / React практика
มุมมอง 2.8K4 ปีที่แล้ว
Короткое видео про все основные хуки React: th-cam.com/video/QDi4pZ8PR4Q/w-d-xo.html Код из этого видео: github.com/ksydex/videos/tree/master/React Документация React по useState: ru.reactjs.org/docs/hooks-reference.html#usestate Музыка из видео: All Night by Ikson soundcloud.com/ikson/ Music promoted by Audio Library th-cam.com/video/bE2rrcUKnok/w-d-xo.html Night Out by LiQWYD soundcloud.com/l...
React Hooks за 7 минут - Уроки React.js / React хуки
มุมมอง 33K4 ปีที่แล้ว
// В слайде на 0:44 в третьей строке не setState а initialState соответственно В этом видео изучим основные хуки React - useState, useEffect, useContext Кстати, видео сделано в новом формате, как вам? Иногда рассинхрон видео и речи, но надеюсь не сильно помешает :) Ещё со звуком проблемы, но исправлюсь к следующему видео! Полезные ссылки: Введение в хуки React: ru.reactjs.org/docs/hooks-intro.h...
MobX вместо React State
มุมมอง 12K4 ปีที่แล้ว
Первая часть: th-cam.com/video/CtxEmOfIUco/w-d-xo.html Код: drive.google.com/file/d/1Mo54MxQopxovqOJi2eCamqQVcZCIpfa5/view?usp=sharing mobx документация: mobx.js.org/ sort в javascript: developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
Mixins - Уроки Vue JS
มุมมอง 4.8K4 ปีที่แล้ว
Документация по Mixins: ru.vuejs.org/v2/guide/mixins.html
Пишем список задач(todo app) на React
มุมมอง 23K4 ปีที่แล้ว
Подключаем MobX к этому приложению: th-cam.com/video/RmThmY0fRx8/w-d-xo.html Исходный код: drive.google.com/file/d/1Mo54MxQopxovqOJi2eCamqQVcZCIpfa5/view?usp=sharing Про деструктуризацию: learn.javascript.ru/destructuring React.js документация: reactjs.org/docs/getting-started.html
Пишем список задач(todo list) на Vue.js
มุมมอง 14K5 ปีที่แล้ว
Пишем список задач на Vue.js. Codepen: codepen.io/ksydex/pen/oOmapL *По поводу состояний задач: можно сделать несколько разных массивов, в которые можно помещать задачи в зависимости от их состояния, а не добавлять в структуру объекта задачи переменную "status". В целом, тут кому как больше нравится. Vue.js документация: vuejs.org/v2/guide/ vue.js CDN: cdn.jsdelivr.net/npm/vue/dist/vue.js
Пишем калькулятор на Vue.js
มุมมอง 24K5 ปีที่แล้ว
Пишем простейший калькулятор на Vue.js. Codepen: codepen.io/ksydex/pen/vMQOgd Vue.js документация: vuejs.org/v2/guide/ vue.js CDN: cdn.jsdelivr.net/npm/vue/dist/vue.js *уточнение по функции eval(): Функция eval(code) позволяет выполнить код, переданный ей в виде строки. Таким образом, мы можешь записать в input калькулятора абсолютно любое математическое выражение в рамках синтаксиса js , и фун...
Спасибо за видео! Друг! Просто и быстро объяснил.
круто что ты умеешь переводить официальную документацию на русский)
отличный урок, спасибо большое
Достоинства: 7 минут Недостатки: Ничего не понятно
Хуже объяснений я не видел! Такое впечатление что нужно вложиться ровно в указанное время а не внятно объяснить. Как на эстафете прямо: максимум скорости - минимум доходчивости. Даёшь следующий ролик за 3 сек!!! Кто быстрее!)))
Урок полезный, но не то что искал. Это скорее не перетаскивание, а замена элементов в массивах, отображаемых в разных, выделенных областях. Полноценное перетаскивание объекта - это перемещение его по экрану с размещением в произвольном месте. Хотелось бы увидеть реализацию данного варианта.
effectAllowed и dropEffect это свойства для построения логики. Т.е. относительно типовые причины для перетаскивания: скопировать (т.е. во второй группе будет "похожий" объект), переместить (объект будет перенесен), создать символьную ссылку (один и тот же объект будет принадлежать обеим группам). Т.е. вы можете в соответствии с логикой приложения указать какая группа позволяет и с какой целью переносить объекты на себя, а с другой стороны в объекте указывать цель его переноса. И уже на уровне браузера будут "подсвечиваться" только те области куда можно перенести для заданной цели
Вообще ни чего не понял. Ты пытался показать как круто и быстро ты умеешь кодить?
eval не стоит вообще не стоит использовать.
Получилось повторить и сделать перетаскивание элемента по полю (менять таким механизмом координаты элемента), отличное понятное видео.
Отличный видос по Vue и Composition API. У тебя отличная подача контента, не бросай это дело.
Спасибо за отличное практическое занятие с пояснениями
Идиотская музыка, да и ты сам с трудом понимаешь что делаешь.
А как сделать редактирование тасков?
Анонимная функция в темплейте, пиздатый антипатерн
Не работает удаление. Пробовал консоль логать вообще ничего не происходит. Памагите
Спасибо за урок, но уровень владения JS и Vue для его понимания явно должен быть выше среднего. Поэтому оценка скорее отрицательная.
Спасибо, так понятней
А как этот калькулятор внедрить на живой сайт на любой ЦМС?
Один вопрос) Зачем ты все это записывал?))) Взял все прочитал с документации))
Просто так 😉
При просмотре у меня сразу заложило нос!!!
Спасибо большое, здоровья тебе друг)
не знаю под чем можно смотреть это и под чем находился автор когда объяснял это Сумбур полнейший на спидах
Ужасное видео. Зачем делать что-то на скорость, если люди смотрят для того, чтобы понять? ну возьми лучше и сними три видео, но зато понятные, чем одно, где все сжато, увеличена скорость и нихрена непонятно!
you saved my life, thank you
Эх, сколько бы видео не просмотрел, не понятно ничего, видимо не мое это реакт
Удаляй канал! Бро, учить и объяснять это совсем не твое
Хотелось бы масштаб побольше, плохо видно.
Автор, тут?)
Кайф. Теперь вопрос - зачем нужны миксины, если можно также метод в компоненте написать?
а как сделать, чтобы итемы можно было сортировать как хочу, сейчас они просто по индексу сортируются
А чё помедленнее нельзя было сделать? Ничё, что новички могут наткнуться на это видео и из-за рассинхрона звука с картинкой может ввести в заблуждение? Дак ещё и так быстро идёт ролик....вообще ппц какой-то
А ниче что новички могут документацию почитать, а это для повторения ролик
@@shoegazzz отдыхай бро
А как сделать чтобы при перетаскивании блок не становился полупрозрачным?
Можешь так не вздыхать каждые 5 секунд и музыка... она мешает) а так спасибо
Спасибо, тема раскрыта!
"расширения вот такие..."
Супер, чётко без воды.
Хороший уровень! Подписался!
А что так медленно рассказывает? Давай быстреее все видео быстрее за 2 минуты 🤣
Стоило обратить внимание про разницу между ref и reactive, что ref больше подходит для примитивов, а reactive для объектов
Хочу посмотреть код, но не получается скачать с гугл диска. Может кто нибудь работающую ссылку отправить?
Привет. Хороший ролик. Но неизменяемость данных - это только про редакс. В мобыксе такого придерживаться нет необходимости.
Спасибо! Урок мне понравился!
Круто, но как менять местами элементы, а не перетаскивать в другую категорию, все обыскал, но на vue 3, не могу найти.
блин вксь ютуб обсмотрел - ни один не показал как по нажатию кнопки добавить элемент или инпут или компонент
Почему данные могут быть не реактивные? В консоль вывожу данные они изменяются, а на странице нет)
Удаление/выполнение через indexOf() работает в данном случае криво. По крайней мере у меня. При изначальном добавлении задач всё ок, id в массиве совпадают с индексом элемента в массиве (добавили первый элемент, у меня id: 0 и он 0 элемент и т.д.), добавим так три элемента, получим id:0 с task[0], id:1 в массиве [1], id:2 в массиве [2]. Удаляем [1]. Теперь снова добавляем новый таск, длина массива сейчас 2, то есть у нового таска будет id: 2 в массиве [2]. Смекаете? Теперь у нас два элемента с одинаковыми id, indexOf вернет первый найденный элемент, это всегда будет тот второй, который добавляли изначально, даже если вы жмете кнопку на вновь добавленном и удаляться у вас будет совсем не то что нужно. Для понимания, на последнем из описанных этапов массив с тасками будет выглядеть так: 0: {id: 0, title: '0', complete: false} 1: {id: 2, title: '2', complete: false} 2: {id: 2, title: '3', complete: false} Соответственно если нажать на 2 элемент, то удалится первый. Решил так (всё гораздо проще получается): deleteTask(index) { // индекс тот что назначается в компоненте List через map, он же там key=index const { allTasks } = this.state; const updatedAllTasks = allTasks.slice(); // делаем не глубокое копирование updatedAllTasks.splice(index, 1); this.setState({ allTasks: updatedAllTasks }); } Выполнение таска тоже по другому сделал, вообще я хоть и абсолютный новичок, но мне не понравилось явное присвоение done = true. В таком случае нельзя вернуть обратно, а если пользователь случайно нажал или что-то не доделал, потом вспомнил и хочет сделать задачу снова активной? Тут нужен аналог toggle из ванилы js. Реализовал так: completeTask(index) { const { allTasks } = this.state; let updatedAllTasks = allTasks.map((task, id) => { // index всё так же передаём из map в компоненте List if (index === id) { task.complete = !task.complete; } return task; }); this.setState({ allTasks: updatedAllTasks }); } Пока получается что присвоение id объекту (таску) вообще не нужно. Это очень подозрительно, скорее всего неправильно, но пока других вариантов не вижу.
Спасибо за развернутный комментарий. Канал в целом не мертв, он всегда был в примерно таком формате, т.е. может выйти случайное видео раз в год. Не могу заниматься им в силу дел. А так, видео целом уже аутдейтнутое, да и старое достаточно, с того времени я уже вырос в разы, да и не фронтенд уже.. )
@@user-bc2nc5lt5p огонь) логично, три года то прошло. Вот новое поколение, растем на твоих видосах)
@@user-bc2nc5lt5p интересно в какое направление ушел ?)
пойдет, правда иммутабельность с мобх не нужна, это редакс осадок у тебя)
Код прям так себе, 2 видео по запросу "vue 3 drag and drop" в 2 раза кароче, в 2 раза информативней, а главное -- учит хорошим манерам написания кода. Оставляю этот комментарий для того, чтобы люди, которые пришли смотреть, понимали, что лучше учиться у других) Ссылка на прекрасное видео по этой же теме: th-cam.com/video/-kZLD40d-tI/w-d-xo.html
А еще главнее - твое видео на английском.... В остальном - два видео ничем не отличаются, только скоростью написания кода. Если это видео поставить на x2 - получится то же самое.