1 00:00:02,070 --> 00:00:04,689 So now we learned some important basics 2 00:00:04,689 --> 00:00:06,890 about Vue.js, and most importantly, 3 00:00:06,890 --> 00:00:09,543 we see its declarative nature in action, 4 00:00:10,430 --> 00:00:14,520 now let's manage some real todos here in the unordered list. 5 00:00:14,520 --> 00:00:15,353 And by the way, 6 00:00:15,353 --> 00:00:18,560 we will later also send them to the backend and so on. 7 00:00:18,560 --> 00:00:20,780 But for the moment, let's ignore the API 8 00:00:20,780 --> 00:00:22,970 and just update this in the browser, 9 00:00:22,970 --> 00:00:25,380 which of course means the todos won't be stored 10 00:00:25,380 --> 00:00:29,173 in any database, but we will learn Vue.js along the way. 11 00:00:30,360 --> 00:00:33,260 So therefore now, I will actually get rid of this h2 12 00:00:33,260 --> 00:00:37,810 and paragraph element here because that was just a demo. 13 00:00:37,810 --> 00:00:41,250 Instead now, when saveTodo is triggered, 14 00:00:41,250 --> 00:00:45,620 I wanna add a new todo to my todo list. 15 00:00:45,620 --> 00:00:48,710 I also might want to update an existing todo, 16 00:00:48,710 --> 00:00:50,830 but that will be the next step thereafter. 17 00:00:50,830 --> 00:00:52,633 Let's start with adding a new todo. 18 00:00:54,190 --> 00:00:55,670 Therefore here, I will get rid 19 00:00:55,670 --> 00:00:58,390 of the newTodo data property here 20 00:00:58,390 --> 00:01:00,673 because we needed that for the demo only. 21 00:01:01,560 --> 00:01:04,160 And instead here in saveTodo, 22 00:01:04,160 --> 00:01:06,120 I'll add a newTodo constant, 23 00:01:06,120 --> 00:01:09,023 which is a new object that I create on the fly, 24 00:01:10,060 --> 00:01:13,120 where I will store the text here 25 00:01:13,120 --> 00:01:14,603 which is my enteredTodoText. 26 00:01:16,460 --> 00:01:20,280 And thereafter, I actually still wanna clear enteredTodoText 27 00:01:20,280 --> 00:01:22,703 so I will reintroduce this line. 28 00:01:24,490 --> 00:01:29,490 I also wanna give every todo at least a pseudo unique ID 29 00:01:29,740 --> 00:01:32,350 because I'll need that later. 30 00:01:32,350 --> 00:01:35,780 For this, I'll give this an ID, which is new Date, 31 00:01:35,780 --> 00:01:37,670 which is this built-in date object 32 00:01:37,670 --> 00:01:39,820 which you can use in both browser side 33 00:01:39,820 --> 00:01:43,760 and backend JavaScript code, which if used like this, 34 00:01:43,760 --> 00:01:46,393 it gives you the current date-time snapshot. 35 00:01:47,590 --> 00:01:51,060 On that, we can call toISOString which gives us 36 00:01:51,060 --> 00:01:54,970 a machine-readable string version of that date. 37 00:01:54,970 --> 00:01:57,460 And unless we now create two todos 38 00:01:57,460 --> 00:01:59,840 in exactly the same millisecond, 39 00:01:59,840 --> 00:02:03,120 we therefore should have a pretty unique ID here. 40 00:02:03,120 --> 00:02:04,973 It's good enough for this demo. 41 00:02:06,400 --> 00:02:10,500 Now this newTodo should be stored in an array of todos, 42 00:02:10,500 --> 00:02:12,700 which we then use for populating 43 00:02:12,700 --> 00:02:15,550 this to todos unordered list. 44 00:02:15,550 --> 00:02:17,650 Now I'll add this array of todos 45 00:02:17,650 --> 00:02:20,870 as a new data property here in this object, 46 00:02:20,870 --> 00:02:23,200 which is returned by data, 47 00:02:23,200 --> 00:02:24,440 and I'll name it todos 48 00:02:24,440 --> 00:02:27,443 and set it equal to an empty array just like this. 49 00:02:28,970 --> 00:02:32,480 Now, it's a data property instead of a constant down there, 50 00:02:32,480 --> 00:02:34,810 because I will use this todos array 51 00:02:34,810 --> 00:02:36,863 in my HTML code in the future. 52 00:02:37,700 --> 00:02:40,040 This newTodo constant, on the other hand, 53 00:02:40,040 --> 00:02:41,940 is only needed temporarily 54 00:02:41,940 --> 00:02:45,400 for storing this newTodo in this array, 55 00:02:45,400 --> 00:02:47,870 because that's the next thing I'll do here. 56 00:02:47,870 --> 00:02:50,370 We can reach out to this todos 57 00:02:51,550 --> 00:02:53,560 because again thanks to Vue, 58 00:02:53,560 --> 00:02:56,370 we can reference this data object 59 00:02:56,370 --> 00:02:59,520 with this from inside our methods. 60 00:02:59,520 --> 00:03:02,320 And then we can use the built-in push method, 61 00:03:02,320 --> 00:03:05,120 which exists on all JavaScript arrays 62 00:03:05,120 --> 00:03:08,490 to add a new piece of data into that array. 63 00:03:08,490 --> 00:03:12,120 And in this case, I'll add to this newTodo object 64 00:03:12,120 --> 00:03:14,460 to this todos array. 65 00:03:14,460 --> 00:03:16,390 So now when saveTodo is triggered, 66 00:03:16,390 --> 00:03:19,623 a newTodo object will be added to this array. 67 00:03:21,180 --> 00:03:23,830 Now that's nice and that should work, 68 00:03:23,830 --> 00:03:26,320 but we wouldn't see anything on the screen 69 00:03:26,320 --> 00:03:28,920 because we're not binding this todos array 70 00:03:28,920 --> 00:03:30,883 to any place in our DOM. 71 00:03:31,760 --> 00:03:33,923 And that's now the part that should change. 72 00:03:34,810 --> 00:03:37,390 Now, I want to let Vue populate 73 00:03:37,390 --> 00:03:39,890 this unordered list with my todos 74 00:03:39,890 --> 00:03:41,780 and that will now be the part 75 00:03:41,780 --> 00:03:44,760 where the difference to just JavaScript, 76 00:03:44,760 --> 00:03:48,830 where we had to create all the todo list items like this, 77 00:03:48,830 --> 00:03:50,630 will be most visible. 78 00:03:50,630 --> 00:03:53,623 It will now be much easier when using Vue. 79 00:03:54,550 --> 00:03:56,090 Because with Vue, 80 00:03:56,090 --> 00:03:58,280 again we use a declarative approach 81 00:03:58,280 --> 00:04:01,783 and therefore we describe our desired end result. 82 00:04:02,700 --> 00:04:06,730 Now, our desired end result or end state 83 00:04:06,730 --> 00:04:10,990 is that we have list items here in this unordered list. 84 00:04:10,990 --> 00:04:13,410 Now, of course, not just one but many list items, 85 00:04:13,410 --> 00:04:14,853 but let's start with one. 86 00:04:16,149 --> 00:04:18,050 Now in every list item, 87 00:04:18,050 --> 00:04:21,800 I then want to have a paragraph with the todo text 88 00:04:21,800 --> 00:04:25,480 because that is what I did in todos.js before as well. 89 00:04:25,480 --> 00:04:27,683 I created a paragraph and set the todoText. 90 00:04:29,140 --> 00:04:31,690 And therefore, I'll do that here as well. 91 00:04:31,690 --> 00:04:34,150 Now, since we use Vue here, 92 00:04:34,150 --> 00:04:36,230 we can use these double curly braces 93 00:04:36,230 --> 00:04:39,210 to let Vue output the text for us. 94 00:04:39,210 --> 00:04:42,350 However, we don't just have one todo but multiple todos 95 00:04:42,350 --> 00:04:44,743 so we will see what we enter here later. 96 00:04:46,090 --> 00:04:47,830 We also know that we wanna have a div 97 00:04:47,830 --> 00:04:52,450 with two buttons though, a edit button and a delete button. 98 00:04:52,450 --> 00:04:55,370 That is something we definitely know as well. 99 00:04:55,370 --> 00:04:56,630 And now, as I mentioned, 100 00:04:56,630 --> 00:05:00,840 we want to tell Vue that it should create one list item 101 00:05:00,840 --> 00:05:03,493 per todo in this todos array. 102 00:05:04,620 --> 00:05:07,720 And for this, Vue got another special attribute, 103 00:05:07,720 --> 00:05:09,250 a so-called directive. 104 00:05:09,250 --> 00:05:13,490 All those special Vue attributes that start with v dash 105 00:05:13,490 --> 00:05:17,640 or with @ are called Vue directives. 106 00:05:17,640 --> 00:05:21,250 And the Vue directive we need now on the li element 107 00:05:21,250 --> 00:05:26,250 is the v-for directive, the v-for attribute, 108 00:05:26,490 --> 00:05:31,070 which is another special attribute Vue will be looking for. 109 00:05:31,070 --> 00:05:35,090 And this allows us to loop through elements 110 00:05:35,090 --> 00:05:37,400 inside of the HTML code, 111 00:05:37,400 --> 00:05:40,850 a little bit as we did it with EJS on the backend, 112 00:05:40,850 --> 00:05:44,210 but even simpler because we just need to add that 113 00:05:44,210 --> 00:05:46,690 on the element that should be replicated 114 00:05:46,690 --> 00:05:48,040 and we don't need to add 115 00:05:48,040 --> 00:05:51,240 any opening or closing curly braces. 116 00:05:51,240 --> 00:05:53,980 Instead, we add v-for on the li element 117 00:05:53,980 --> 00:05:56,210 because I wanna replicate this. 118 00:05:56,210 --> 00:06:00,293 And then here we can just write todo in todos. 119 00:06:02,980 --> 00:06:06,450 Now, todos here is actually 120 00:06:06,450 --> 00:06:09,140 the name of our data property here. 121 00:06:09,140 --> 00:06:11,520 So if you chose a different name here, 122 00:06:11,520 --> 00:06:15,040 you will have to choose a different name here as well 123 00:06:16,030 --> 00:06:18,040 because we're telling Vue that we wanna go through 124 00:06:18,040 --> 00:06:20,890 all the pieces of data in this data property, 125 00:06:20,890 --> 00:06:22,563 which should be an array. 126 00:06:24,010 --> 00:06:27,190 This name here todo is up to you though. 127 00:06:27,190 --> 00:06:30,040 But since we will have single todo items in there, 128 00:06:30,040 --> 00:06:32,000 todo is a fitting name 129 00:06:32,000 --> 00:06:33,850 because this will now be a variable 130 00:06:33,850 --> 00:06:38,850 that's available inside of this replicated element now. 131 00:06:39,170 --> 00:06:41,370 So inside of this li element, 132 00:06:41,370 --> 00:06:43,490 which has this v-for directive, 133 00:06:43,490 --> 00:06:48,130 this todo key, this todo variable will be available 134 00:06:48,130 --> 00:06:52,123 referring to one individual todo per repetition. 135 00:06:53,700 --> 00:06:54,980 So that means that here, 136 00:06:54,980 --> 00:06:59,640 if I wanna output the todoText, I can refer to todo.text 137 00:07:00,960 --> 00:07:03,010 because I added todo here 138 00:07:03,010 --> 00:07:05,780 with a text property that stores the text, 139 00:07:05,780 --> 00:07:08,043 and therefore I can output the text here. 140 00:07:09,510 --> 00:07:11,800 And for the moment, that's it. 141 00:07:11,800 --> 00:07:15,470 That should lead Vue to create one new list item 142 00:07:15,470 --> 00:07:17,320 with that content inside of it, 143 00:07:17,320 --> 00:07:21,180 which does contain dynamic data itself per item 144 00:07:21,180 --> 00:07:22,860 in this todos array. 145 00:07:22,860 --> 00:07:25,510 And as this todos array changes, 146 00:07:25,510 --> 00:07:28,060 just as before with that string that we changed, 147 00:07:28,060 --> 00:07:32,650 Vue will revisit the DOM and for example add a new list item 148 00:07:32,650 --> 00:07:36,273 if a new item was added to the todos array. 149 00:07:37,330 --> 00:07:40,130 So here, if we now reload, 150 00:07:40,130 --> 00:07:43,170 you might see this flash here down there briefly, 151 00:07:43,170 --> 00:07:45,870 that only happens here in development 152 00:07:45,870 --> 00:07:49,360 because of how we load this Vue library. 153 00:07:49,360 --> 00:07:51,300 This is something we can prevent 154 00:07:51,300 --> 00:07:54,593 as we dive deeper into Vue so we can ignore that for now. 155 00:07:55,630 --> 00:08:00,170 And we can now add again a new todo and click save. 156 00:08:00,170 --> 00:08:02,900 And here, our item appears. 157 00:08:02,900 --> 00:08:06,840 The buttons won't do anything, but we added a new todo. 158 00:08:06,840 --> 00:08:10,483 And if I add a second todo, this also works. 159 00:08:12,070 --> 00:08:16,100 And I mean, compare this JavaScript code here 160 00:08:16,100 --> 00:08:19,800 and this HTML code, which is very readable, 161 00:08:19,800 --> 00:08:22,690 to this code here which we had to use 162 00:08:22,690 --> 00:08:24,860 for creating a todo before. 163 00:08:24,860 --> 00:08:27,383 Yeah, that is definitely simpler.