Скачать "Todo app (список задач) на Vue 3 + Composition API / Vue практика"

"videoThumbnail Todo app (список задач) на Vue 3 + Composition API / Vue практика

CSS3 #9 Плавающие элементы и очистка потока (Floating Elements & Clearfix)

CSS3 #9 Плавающие элементы и очистка потока (Floating Elements & Clearfix)

Канал: webDev

Полный курс Laravel 12 HTTP ответы (Responses)

Полный курс Laravel 12 HTTP ответы (Responses)

Канал: One Code

Начальный курс SQL.Агрегация SUM и COUNT

Начальный курс SQL.Агрегация SUM и COUNT

Канал: Igor Vovchenko

🔴 Let's build Netflix 2.0 with REACT.JS! (Stripe Checkout & Webhooks, Redux, Firestore, Google Auth)

🔴 Let's build Netflix 2.0 with REACT.JS! (Stripe Checkout & Webhooks, Redux, Firestore, Google Auth)

Канал: Sonny Sangha

Основы C# - #1 - Введение

Основы C# - #1 - Введение

Канал: loftblog

Проектирование базы данных

Проектирование базы данных

Канал: loftblog

PhpStorm - #7 - Синхронизация с удаленным сервером. Deployment.

PhpStorm - #7 - Синхронизация с удаленным сервером. Deployment.

Канал: loftblog

Начальный курс SQL.Различные варианты синтаксиса

Начальный курс SQL.Различные варианты синтаксиса

Канал: Igor Vovchenko

Node.js #9 Создание базового роутинга (Create Base Routing)

Node.js #9 Создание базового роутинга (Create Base Routing)

Канал: webDev

Основы C# - #5 - Массивы

Основы C# - #5 - Массивы

Канал: loftblog

программирование

разработка

web

developer

junior

web-dev

javascript

js

css

html

vue.js

react

урок

гайд

guide

lesson

vue 3

composition api

vue3

00:00:02

этом видео мы напишем список задач на

00:00:04

view 3 с использованием новый композиция

00:00:06

кабель что же для начала конечно же

00:00:12

нужно создать проект поэтому давайте

00:00:14

откроем консоль и идём в директорию где

00:00:17

хотим развернуть проект и и развернём

00:00:19

шаблон с помощью view силой или twitter

00:00:24

для тех кто не знаком с feet it новый

00:00:27

веб-инструмент от разработчика view

00:00:29

требованию

00:00:31

который является аналогом можно сказать

00:00:34

его пока только для системы модулей

00:00:38

использует подход нативный то есть

00:00:40

javascript modules поэтому я буду

00:00:43

использовать всего так как во первых это

00:00:44

что-то новое во вторых насколько здесь

00:00:47

написано предлагает более высокую

00:00:50

производительность нежели vopak и другие

00:00:52

решения но сразу хочу заметить что все

00:00:56

таки увидим есть недостатки так как

00:00:58

инструмент довольны новой одесской

00:01:00

только заметил то что он не производит

00:01:02

type checking это значит что при

00:01:04

компиляции билде приложение этот

00:01:07

инструмент вам не подскажет какие у вас

00:01:09

там типы где неправильно расставлены

00:01:11

поэтому-то аптеки на ложится полностью

00:01:14

на вас или на вашу идею что же развернем

00:01:17

проект вы можете развернуть его также с

00:01:19

помощью сила если вам будет так удобнее

00:01:22

но с помощью вид и это будет сделать так

00:01:25

и npm и нет вид и об давайте назовем

00:01:31

бьют 3 туду сразу хочу сказать что это

00:01:37

будет серия уроков

00:01:39

серии видео скажем так в этом видео мы

00:01:44

просто напишем список задач в следующем

00:01:47

я думаю отлив октарин этот проект на

00:01:53

typescript чтобы везде было типизация и

00:01:56

так далее а последнем завершающем ведем

00:02:00

наверное перепишем еще раз но

00:02:03

еще с использованием видео exo потому

00:02:06

что во view 3 все-таки небольшие

00:02:08

изменения есть кроме самого

00:02:13

композиция на пик который в принципе не

00:02:15

вносит ничего нового он просто

00:02:17

предлагает полностью новый подход

00:02:19

решения тех же задач

00:02:22

общем api все еще остался но композиций

00:02:26

на пик позволяет делать проекты гораздо

00:02:29

качественней я бы сказал так скомпонован

00:02:33

рабочее пространство сразу же давайте

00:02:37

запустим команды df откроем браузер этот

00:02:41

проект как видите все работает он

00:02:43

извернулся даже template небольшой есть

00:02:45

и давайте удалим сразу ненужное это

00:02:49

компонент hello world

00:02:51

и его также использование из обведет

00:02:57

нужно удалить а именно импорт ну и в

00:03:03

определении в компонентах и соответствии

00:03:05

с шаблоном также в яндекс с с немного

00:03:09

перепишем стиль изменим шрифт на

00:03:14

jetbrains можем просто мне нравится и

00:03:18

подходит под и даёшь q

00:03:19

также сбросим для всего margin и padding

00:03:23

а для main пропишем максимальную ширину

00:03:29

450 пикселей пусть будет и также марджан

00:03:34

0 и авто есть чтобы автоматически

00:03:37

центрировать также в компоненте об .

00:03:41

view обернем все в main чтобы окраски

00:03:44

отцентрировать это все дело как видите

00:03:48

все центрируется

00:03:51

что ж приступим это будет самый

00:03:55

классический список задач и как и в

00:03:56

предыдущих видео где мы описали на

00:03:59

реакции также навью

00:04:00

и поэтому давайте создадим всего будет

00:04:03

два компонента 1 the task карт и второй

00:04:08

это the skin food соответственно scart

00:04:11

это карточка задача 2 the skin food

00:04:16

с помощью током этом мы сможем добавлять

00:04:18

новые задачи там будет два импа то

00:04:21

давайте начнем со scart я воспользуюсь

00:04:24

слиппи там который разворачивает

00:04:26

компонент но разворачивает он вот для

00:04:29

typescript а поэтому удалю ненужное и в

00:04:33

принципе вот так выглядит этот шаблон

00:04:35

для текущего момента в задаче у нас

00:04:39

будет два текста это заголовок и

00:04:45

описание

00:04:46

заголовок пусть будет 4 а описание

00:04:50

просто параграф также div с двумя

00:04:56

кнопками первая кнопка это кнопка

00:05:02

выполнение задачи а вторая кнопка это

00:05:06

удаление задачи соответственно помещаем

00:05:08

нужны эмоции в эти кнопки и они будут

00:05:12

рендериться

00:05:14

по условию хорошо

00:05:18

сразу давайте тогда импортируемый

00:05:21

компонент в об view

00:05:24

тоска заметить что с убитой обязательно

00:05:28

указывать расширением файла в components

00:05:33

на президента scart и просто поместим на

00:05:35

экран как ведь уже что-то появилось

00:05:40

давайте добавим props проб точнее

00:05:49

пусть это будет называться моду сделан

00:05:54

его обязательно стандартное значение

00:05:58

пусть будет айзе равный нулю

00:06:01

тайтл треть видео например description

00:06:06

and apple out on youtube

00:06:15

и статус пусть будет фол стоит задача

00:06:20

неполного так выглядит модель задачи и

00:06:24

сразу же воспользуемся этой моделью как

00:06:36

видите уже появляются и тут конечно

00:06:39

рендеринг мы поставим если модель статус

00:06:47

равен фолз то есть мне модель статус там

00:06:50

его будем галочку иначе выводим крестик

00:06:52

то есть по стандартам и закидываем новую

00:06:54

задачу нам ее нужно сделать мы нажимаем

00:06:57

на крест на галочку и после этого мы

00:07:02

можем эту задачу удалить так мы я уже

00:07:03

выполнили также давайте сделаем стиль

00:07:10

пусть главный

00:07:11

div close to sdcard по названию

00:07:16

компонента давайте мы docsis из

00:07:21

определим какой-нибудь май ставил

00:07:24

например в котором будет будут следующие

00:07:28

свойства а именно border border-radius

00:07:33

5 пикселей на бордюр пусть будет solid

00:07:39

один пиксель и light grey

00:07:44

и также по 15 пикселей или 10 ладно

00:07:49

пусть будет 5 так как мы определили это

00:07:52

в яндексе с с то это будет доступна нас

00:07:55

отовсюду поэтому мы просто можем тут это

00:07:58

использовать таким образом тасс твой май

00:08:01

вставил нам так как видите по его

00:08:03

соботка но лучше давайте 10 пикселей все

00:08:05

же добавим впадин потому что 5 пикселей

00:08:08

слишком мало ну и для такс карт мы

00:08:12

определим дисплей flex & juicy cunt and

00:08:18

spa избит ринге также align iphone с

00:08:21

центр чтобы акцентировать это все дела

00:08:25

также пусть у кнопок и

00:08:33

у кнопок и у кнопок в общем-то input of

00:08:40

и ucla самой стал будет вот такой стиль

00:08:44

у всех чтобы он в общем то у нас в одном

00:08:47

стиле все приложение выглядело

00:08:50

что там еще нужно в компоненте до scart

00:08:54

в принципе он почти готов осталось

00:08:55

добавить 2 call back a 1 call back это

00:08:57

нажатии на кнопки с галочкой и второй

00:09:01

это кал бег на нажатие кнопки с

00:09:03

крестиком поэтому методист от мы

00:09:07

определим вы сейчас важный момент

00:09:09

methods этап это как раз таки композиция

00:09:12

api который приносит нам лицу новый

00:09:16

синтаксис и в нем по стандарту нет

00:09:20

контекста то есть мы через dice

00:09:23

иметь не сможем получить вот это вот

00:09:25

имеет как раз чтобы вызывать калмыки

00:09:28

чтобы и поэтому чтобы получить и мид в

00:09:33

этот метод пробрасывать а контекст ну а

00:09:38

1 метр первым параметром пропсы

00:09:40

пробрасывать за вторым контекст как раз

00:09:42

но с помощью де структуризация мы

00:09:44

контекст раскладываем красный вид

00:09:46

который нам понадобится и здесь мы

00:09:48

определим методы

00:09:54

он пусть будет он им следовать иметь

00:10:00

он да и имеет он rebug без каких-либо

00:10:15

параметров и тут мы просто вызываем и

00:10:19

мид лондон и все ну и тут тоже принципе

00:10:25

самое и сейчас тоже важный момент чтобы

00:10:29

получить доступ к этим методом тире

00:10:31

функциям в шаблоне

00:10:33

или в других местах этого компонента нам

00:10:37

нужно из методы стаб возвратить виде

00:10:41

объекта в котором будут содержаться как

00:10:44

раз все функции методы переменные и в

00:10:49

общем все что вам нужно получить вне

00:10:52

этого метода мы это возвращаем в этом

00:10:55

объекте теперь соответственно мы при

00:11:00

нажатии на клик бензина event клик на

00:11:05

галочку и мид он дан она крестик и метан

00:11:12

реноф и все этот компонент в принципе

00:11:14

готов далее давайте перейдем в task

00:11:21

input также воспользуюсь не питом

00:11:26

которую меня тут есть вебстор мин уберу

00:11:29

все ненужные тут у нас будет два input а

00:11:33

и кнопка сразу же добавим вот сюда

00:11:47

определение как компонент в объекте

00:11:50

components

00:11:51

добавим над тоска карт этот новый

00:11:54

компонент на спинку чтобы сразу видеть

00:11:57

что у нас там ну вот тут кстати влазит

00:12:01

недостаток вид и как раз потому что

00:12:05

обязательно нужно добавлять расширение

00:12:07

файла в конце при импорте в кнопку в the

00:12:12

screen придавать добавим от тоски текст

00:12:16

также пусть будет тут стиль также

00:12:22

добавим давайте пусть будет называться

00:12:25

май лист который будет выглядеть так

00:12:28

дисплей grid template

00:12:33

rows of the template

00:12:38

collapse сто процентов чтобы простой

00:12:42

список и получать y пусть будет 5

00:12:47

пикселей и давайте применим of the skin

00:12:50

тут как раз вот тут

00:12:54

чтобы выстрел все в такой вот красивый

00:12:57

список также web ладно давайте это мои

00:13:01

добавим padding пусть будет сверху и 10

00:13:09

пикселей ну и снизу в том числе чтобы

00:13:12

как то это все не слипалась также в the

00:13:16

skin food

00:13:19

нужно все таки будет один стиль также

00:13:22

обозначить название the skin food просто

00:13:26

сделаем отступ снизу но в принципе так

00:13:32

так до 10 пикселей 0 если мы так сделаем

00:13:35

то в мае не можно будет не делать сосуд

00:13:39

с поединком хоть по семантике это

00:13:40

немного неправильно будет

00:13:41

но у нас тут мне урок по сессия скажем

00:13:45

так отлично

00:13:48

добавим им потом placeholder для

00:13:53

accessibility 1 тайтл и 2 placeholder

00:13:57

это бисквит шин в принципе уже выглядит

00:14:04

неплохо добавим теперь логику

00:14:07

соответственно все мы помним из view 2

00:14:10

во viewtrip тоже осталась биндинг

00:14:14

двусторонний с помощью we моду

00:14:18

поэтому нам во первых нужно определить

00:14:22

реактивную переменную мы это сделал

00:14:24

сетап определяем тайтл с помощью функции

00:14:28

риф которые возвращают проектную

00:14:30

переменную как раз и также дискрипшн а

00:14:34

также через реку стандартные значения с

00:14:37

нами пустая строка для тех кто не знает

00:14:40

об этом тариф это замена вот этому

00:14:43

синтаксису

00:14:44

то есть вот это все это вот это ну если

00:14:51

давай еще дискрипшн сюда же

00:14:52

то будет просто вот эти две строки равны

00:14:55

вот этим пяти до условно 6 да и вообще

00:15:01

вот этот синтаксис на react очень похож

00:15:03

с его хуком new state так далее мы

00:15:07

определили соответственно так же

00:15:09

возвращаем что получить к ним доступ и с

00:15:14

помощью не могу на input

00:15:16

бензин эти переменные

00:15:24

на первый-второй топил дискрипшн

00:15:26

соответственно теперь работает все

00:15:29

давайте проверим консоль

00:15:31

никаких ошибок не возникает значит все

00:15:33

хорошо здесь у нас будет 1 1 callback по

00:15:41

нажать вот на эту кнопку пусть он будет

00:15:43

он от той ск называться также определим

00:15:46

здесь эту функцию task возврати мне и из

00:15:55

этого методистов и что мы здесь делаем

00:16:00

так это также нам нужно получить сначала

00:16:04

имеет чтобы вызвать call back и здесь мы

00:16:09

используем и мид он a task и пробраться

00:16:15

на объект стоящей ставил визит без

00:16:17

кришны

00:16:19

как раз из текущее значение и еще

00:16:22

интересный момент определим объекты миц

00:16:25

в объекте glan которым мы экспортируем и

00:16:29

здесь название нашего камбэка он отдаст

00:16:37

здесь мыс можно сказать во лидируем его

00:16:39

пишем здесь точно ту же самую

00:16:42

конструкцию то есть тут у нас будет

00:16:45

такой объект и если сайт у равен пустой

00:16:51

строке или description травин пустой

00:16:53

строке мы возвращаем phones

00:16:56

это во первых то есть онго лидируем

00:17:01

скажем так валидация не прошла во вторых

00:17:04

вызываем alert где говорим feel so in

00:17:12

fog plisse иначе возвращаем труб и

00:17:18

давайте сразу же проверим ничего не

00:17:22

будем писать нажмем и ничего не

00:17:24

сработало он отдаст

00:17:28

что же он нам пишет так название у нас

00:17:35

правит правильно и точно момент который

00:17:43

связан с you try хорошо что сейчас или

00:17:45

случилось вот здесь мы передаем не

00:17:48

просто тайтл

00:17:49

отойду целью и в том числе description

00:17:52

потому что все таки без белье мы

00:17:55

передаем не значение a proxy

00:17:59

точно тут орех или прокси передается без

00:18:04

использования вылью то есть . вы да это

00:18:06

как раз именно есть значение вот тут

00:18:09

важно это запомните потому что сейчас я

00:18:11

даже впал в ступор

00:18:13

потому что передал не значение орех на

00:18:17

этот на эту реактивную переменную

00:18:20

соответственно поэтому он не мог

00:18:22

сравнить просто строку с каким-то

00:18:23

объектом ну и соответственно из-за этого

00:18:25

это и произошло но теперь все нормально

00:18:27

вылетает calor который прочно заполнить

00:18:29

информацию хорошо этот компонент нас

00:18:35

также готов и теперь в принципе оба

00:18:41

компонента готовы кстати в тасс корр

00:18:44

тоже также можно определить объект

00:18:46

ими цветут воспользуется любим его

00:18:50

другим синтез яндексе сам его написание

00:18:53

просто массив с названиями call back в

00:18:58

который может и ввести этот компонент

00:19:00

просто для декоративности

00:19:03

что же в принципе все готово кроме того

00:19:06

что не хватает бизнес-логики главным

00:19:09

компонентом также используем сетап все с

00:19:13

тем же грех импортируем лев из view

00:19:21

определяем task list с помощью риф пусть

00:19:27

он изначально будет не пустой и состоять

00:19:31

из задач и такой статус состоится такой

00:19:48

значок стандарту пусть будет так же

00:19:51

сразу возвратим его

00:19:53

и здесь определить список

00:19:58

где вли оборачиваем соответственно

00:20:02

задачу ну и с помощью ли for проходим

00:20:06

все по этому списку также присваиваем

00:20:11

ключ чтобы view не ругался

00:20:13

это будет айди ну и передаем в модель

00:20:19

этот в модель соответственный элемент

00:20:23

также определим стиль во-первых применим

00:20:30

май лист а во-вторых task list

00:20:39

надо убрать list style поставить самому

00:20:46

чтобы не показывалась это . и теперь the

00:20:56

screen пут на ивент он так task по-моему

00:21:04

так он нас назывался да он отдаст

00:21:07

мы бензин метод метод под названием от

00:21:15

task просто котором мы получаем объект

00:21:19

по и вот давайте вот сразу

00:21:23

реструктуризировать итайпу descripcion и

00:21:25

что он будет делать так это присваивать

00:21:29

task list вылью новое значение а это

00:21:34

новое значение мы сформируем с помощью

00:21:37

спред оператора три точки

00:21:39

то есть в новый массив мы вываливаем все

00:21:43

что есть у нас уже в task list

00:21:45

и также добавляем новый объект

00:21:48

вида айди пусть у нас будет task list

00:21:53

целью длина плюс 1 то есть генерировать

00:21:57

садишь них будет по длине массива той

00:22:02

толпы без кришны мы берем из параметров

00:22:04

а статус по стандарту пойдем фолз так

00:22:09

выглядит добавление задачи давайте сразу

00:22:11

же проверим но сначала за бензин сначала

00:22:17

точнее эту функцию возврате

00:22:19

и забить зимы и на он от ask your task

00:22:28

добавляем как видите уже добавилась

00:22:30

осталось сделать с рабочими кнопки и на

00:22:33

этом все

00:22:34

поэтому определим две новых функций секс

00:22:39

до task

00:22:44

в параметре мальчишник скопируем и тут

00:22:50

rim of ask также получаем айдишник седан

00:22:55

тасс будет работать следующим образом

00:22:57

также task list войду мы присваиваем

00:22:59

значение но тут мы используем мэтт где

00:23:04

если у текущего элемента айди ради

00:23:08

переданному в параметрах параметра мы

00:23:11

статус ставим труппа и задачи сделаны

00:23:14

возвращаем x в любом случае то есть

00:23:16

текущий элемент давайте строгое

00:23:18

сравнения то поставим обри муфт с в

00:23:21

принципе самая часть начальная совпадает

00:23:25

но мы используем здесь фильтр и

00:23:27

возвращаем каждый элемент у которого и

00:23:30

лишних не равен а и теперь изменив

00:23:32

параметр ну в принципе все осталось

00:23:40

здесь забиндить ивенты он риму и также

00:23:45

возвратить

00:23:46

is set up приму в task и сеть don't ask

00:23:53

он рифмы соответственно rim of those

00:23:56

и пробрасываем а это monde отсюда мы

00:24:00

получаем к ним доступ и и на он дан

00:24:05

также создан the sky также альтам айди

00:24:09

проверяем как то у нас все работает

00:24:14

винтаж newbies

00:24:18

добавляем применяем точнее выполняем и

00:24:22

удаляем по добавляем задачек разных

00:24:27

чтобы удостовериться так вот сейчас у

00:24:30

нас добавился новый айдишник точнее

00:24:33

одинаковый почему-то на я уже

00:24:34

сталкивался с такой задачи на самом деле

00:24:37

потому что мы тут неправильно

00:24:41

генерируемой де нам нужно брать не длину

00:24:47

списка a task list венди а последний

00:24:57

элемент да не немного лапша повышается

00:25:07

на мы в общем то берем просто дичь не

00:25:09

последнего элемента тогда такого

00:25:11

произойти не должно по добавляем задачи

00:25:16

чтобы удостовериться что все должно быть

00:25:19

snore вот мы такие обособленные задачи

00:25:23

убираем и как видите вот crate видео час

00:25:26

удаляю да и ударил и семена нам и все

00:25:30

довольно хорошо работает что ж на этом

00:25:33

все в следующем видео а три факта рим и

00:25:37

добавим так скрипт этот проект мы лишь

00:25:39

данный видео оказалось для вас полезным

00:25:40

если это так ставьте лайки и

00:25:42

подписывайтесь на канал и до скорого

Описание:

Проект из видео: https://github.com/ksydex/videos/tree/master/Vue/1.%20Vue3%20todo%20app Про Vite: https://vuejs.org/guide/quick-start.html Про Composition API: https://vuejs.org/api/#composition-api

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Todo app (список задач) на Vue 3 + Composition API / Vue практика"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Todo app (список задач) на Vue 3 + Composition API / Vue практика" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Todo app (список задач) на Vue 3 + Composition API / Vue практика"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "Todo app (список задач) на Vue 3 + Composition API / Vue практика" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Todo app (список задач) на Vue 3 + Composition API / Vue практика"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Todo app (список задач) на Vue 3 + Composition API / Vue практика"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.