1 00:00:02,070 --> 00:00:04,650 Now to get started with Vue, 2 00:00:04,650 --> 00:00:06,670 I'm back in this front-end project, 3 00:00:06,670 --> 00:00:09,620 which we used in the previous course section. 4 00:00:09,620 --> 00:00:13,370 Though, you also find this project attached again. 5 00:00:13,370 --> 00:00:15,670 So you can simply use the attached project, 6 00:00:15,670 --> 00:00:18,503 and open that in a new VS Code window. 7 00:00:19,360 --> 00:00:22,710 Now you don't need to have a custom API up and running, 8 00:00:22,710 --> 00:00:25,650 because as a first step in index.html, 9 00:00:25,650 --> 00:00:28,950 I'll remove this scripts/todos.js import. 10 00:00:28,950 --> 00:00:31,670 And I'll just keep that todos.js file, 11 00:00:31,670 --> 00:00:33,710 so that we can always reference it, 12 00:00:33,710 --> 00:00:37,470 and see how much easier it will be with Vue. 13 00:00:37,470 --> 00:00:39,670 So, I'll Just keep that file for reference. 14 00:00:39,670 --> 00:00:42,770 At the moment, no file is imported here. 15 00:00:42,770 --> 00:00:44,130 No script file. 16 00:00:44,130 --> 00:00:45,040 And hence of course, 17 00:00:45,040 --> 00:00:48,500 if we open index.html with the life server, 18 00:00:48,500 --> 00:00:51,800 what happens here is that we see our interface, 19 00:00:51,800 --> 00:00:54,290 but nothing happens here if we click these buttons. 20 00:00:54,290 --> 00:00:57,290 We have no JavaScript code that would handle this. 21 00:00:57,290 --> 00:00:59,150 Instead, the form gets submitted, 22 00:00:59,150 --> 00:01:00,950 because that's the browser default. 23 00:01:00,950 --> 00:01:04,090 A request gets sent to a backend, which doesn't handle it. 24 00:01:04,090 --> 00:01:07,310 Hence the page reloads and this page isn't too useful, 25 00:01:07,310 --> 00:01:11,440 therefore. But we will change this with help of Vue.js. 26 00:01:11,440 --> 00:01:15,790 And for this, you should visit "vuejs.org". 27 00:01:15,790 --> 00:01:18,130 Alternatively, you can of course also simply search 28 00:01:18,130 --> 00:01:22,110 for Vue.js and then visit this official webpage. 29 00:01:22,110 --> 00:01:25,140 Now, if you see a banner like this here at the top. 30 00:01:25,140 --> 00:01:26,820 Which you might not. 31 00:01:26,820 --> 00:01:28,560 Then you should click on "click Here" 32 00:01:28,560 --> 00:01:31,380 to view the latest version documentation. 33 00:01:31,380 --> 00:01:32,900 If you don't see the banner, 34 00:01:32,900 --> 00:01:36,130 then you already are on the latest version page. 35 00:01:36,130 --> 00:01:38,200 But if you see it, click there, 36 00:01:38,200 --> 00:01:41,130 and you should be on the documentation page 37 00:01:41,130 --> 00:01:43,653 for the latest version of Vue.js. 38 00:01:44,610 --> 00:01:48,380 Now Vue.js is a big framework with a lot of features, 39 00:01:48,380 --> 00:01:52,080 and that's why I do have a complete huge course on it, 40 00:01:52,080 --> 00:01:55,920 because you can't build an entire course just for debt. 41 00:01:55,920 --> 00:01:59,130 But we can get started in this course here and learn some of 42 00:01:59,130 --> 00:02:01,560 the most important features step by step. 43 00:02:01,560 --> 00:02:03,500 Which will already help us build 44 00:02:03,500 --> 00:02:05,733 more powerful User Interfaces. 45 00:02:06,690 --> 00:02:09,650 And the offer we can click on "Get Started" here, 46 00:02:09,650 --> 00:02:11,877 or go to "Docs" "Guide", 47 00:02:12,830 --> 00:02:14,810 and then to "Installation". 48 00:02:14,810 --> 00:02:16,430 If you clicked on get started, 49 00:02:16,430 --> 00:02:18,737 you should also go to "Installation". 50 00:02:19,740 --> 00:02:21,270 Now, there are different ways 51 00:02:21,270 --> 00:02:24,560 of creating a project that uses Vue.js, 52 00:02:24,560 --> 00:02:27,490 and there are also more advanced ways which allow us 53 00:02:27,490 --> 00:02:30,220 to build more advanced Vue.js apps. 54 00:02:30,220 --> 00:02:34,230 But, I do talk about them in my separate Vue.js course. 55 00:02:34,230 --> 00:02:35,960 A big advantage of Vue is 56 00:02:35,960 --> 00:02:39,460 that you don't need any complex setups to use it, 57 00:02:39,460 --> 00:02:41,760 but that instead, you can simply include it 58 00:02:41,760 --> 00:02:43,320 into your existing webpage, 59 00:02:43,320 --> 00:02:45,760 and start using view features there. 60 00:02:45,760 --> 00:02:47,993 And that's exactly what we will do here. 61 00:02:49,150 --> 00:02:52,250 For this, we want to use this "CDN" approach. 62 00:02:52,250 --> 00:02:55,610 CDN stands for a Content Delivery Network. 63 00:02:55,610 --> 00:02:56,443 And in the end, 64 00:02:56,443 --> 00:02:59,200 it means that we can include this script element 65 00:02:59,200 --> 00:03:00,400 into our page. 66 00:03:00,400 --> 00:03:03,700 And this will load the view framework code 67 00:03:03,700 --> 00:03:05,610 from some other server. 68 00:03:05,610 --> 00:03:09,090 So not from our server, but from some other server. 69 00:03:09,090 --> 00:03:11,880 Alternatively, we can download this code 70 00:03:11,880 --> 00:03:13,610 and simply include it in our page, 71 00:03:13,610 --> 00:03:15,180 and load it from there. 72 00:03:15,180 --> 00:03:17,620 That would be an option as well. 73 00:03:17,620 --> 00:03:22,340 And you can use either approach, but often a CDN is quicker. 74 00:03:22,340 --> 00:03:25,330 Not as long as you are developing locally, 75 00:03:25,330 --> 00:03:29,030 because nothing will beat the speed of your local computer. 76 00:03:29,030 --> 00:03:31,660 A request sent from your local computer 77 00:03:31,660 --> 00:03:35,000 to your local computer is of course extremely fast. 78 00:03:35,000 --> 00:03:37,870 But as soon as you host your website on a server, 79 00:03:37,870 --> 00:03:41,430 on a remote machine, often such a CDN than is quicker, 80 00:03:41,430 --> 00:03:44,073 instead of requests being sent to your server. 81 00:03:44,930 --> 00:03:47,660 That's why I will use this CDN link here. 82 00:03:47,660 --> 00:03:52,660 And I will now include it here below this link element. 83 00:03:52,920 --> 00:03:55,920 I will also add "defer" here to make sure 84 00:03:55,920 --> 00:03:59,793 that it only executes once the rest of this page was parsed. 85 00:04:01,030 --> 00:04:02,760 Now with that added, 86 00:04:02,760 --> 00:04:06,490 I will add another file into scripts folder, 87 00:04:06,490 --> 00:04:08,210 and I'll name it "app.js". 88 00:04:08,210 --> 00:04:10,290 Though the name is totally up to you. 89 00:04:10,290 --> 00:04:13,560 The name doesn't have to be app.js. 90 00:04:13,560 --> 00:04:16,322 In here, I will write my Vue specific code. 91 00:04:18,519 --> 00:04:19,490 And they offer of course, 92 00:04:19,490 --> 00:04:23,830 I'll also include this file here in the index.html file, 93 00:04:23,830 --> 00:04:26,000 after including the Vue package. 94 00:04:26,000 --> 00:04:29,220 The Vue framework code needs to be included first, 95 00:04:29,220 --> 00:04:30,960 so that our code is then able 96 00:04:30,960 --> 00:04:33,563 to leverage this Vue framework code. 97 00:04:34,420 --> 00:04:36,266 So, I'll add another script here 98 00:04:36,266 --> 00:04:41,266 and now the source is scripts/app.js and we also defer this. 99 00:04:43,850 --> 00:04:46,160 But we have to include our own code 100 00:04:46,160 --> 00:04:48,830 after including the Vue framework code, 101 00:04:48,830 --> 00:04:51,843 because we will rely on this Vue framework code. 102 00:04:52,940 --> 00:04:55,580 And now we will do something interesting. 103 00:04:55,580 --> 00:04:59,360 In app.js, we will add a constant, 104 00:04:59,360 --> 00:05:01,247 which we could name "TodosApp" 105 00:05:02,540 --> 00:05:04,320 with a capital starting character, 106 00:05:04,320 --> 00:05:06,030 though that's technically not required. 107 00:05:06,030 --> 00:05:08,130 It's just a convention. 108 00:05:08,130 --> 00:05:09,690 And in this TodosApp constant, 109 00:05:09,690 --> 00:05:11,320 I'll store a JavaScript object, 110 00:05:11,320 --> 00:05:15,580 which is created dynamically on the fly with curly braces. 111 00:05:15,580 --> 00:05:17,270 So it's not based on some class, 112 00:05:17,270 --> 00:05:19,500 it's just a JavaScript object created 113 00:05:19,500 --> 00:05:21,553 with this object literal notation. 114 00:05:23,160 --> 00:05:26,920 In this object, we now add a data method. 115 00:05:26,920 --> 00:05:27,753 Like this. 116 00:05:27,753 --> 00:05:30,870 That's how we can add methods to objects. 117 00:05:30,870 --> 00:05:33,630 We typically added methods to classes, 118 00:05:33,630 --> 00:05:36,520 but we can also directly add them to objects like this 119 00:05:36,520 --> 00:05:39,490 when using the object literal notation. 120 00:05:39,490 --> 00:05:41,380 Now, this is a function connected 121 00:05:41,380 --> 00:05:43,170 to this object named "data". 122 00:05:43,170 --> 00:05:45,300 And it has to be named "data", 123 00:05:45,300 --> 00:05:48,323 because that's a special name Vue will look for. 124 00:05:49,800 --> 00:05:51,960 In data, we want to return something. 125 00:05:51,960 --> 00:05:54,060 And the something which we do return again 126 00:05:54,060 --> 00:05:56,773 is an object, and it has to be an object. 127 00:05:58,390 --> 00:06:03,390 And then this object, I will now add a newTodo key, 128 00:06:03,760 --> 00:06:08,760 which I'll set to a string with a content of Learn Vue.js!. 129 00:06:11,670 --> 00:06:13,603 So that's a simple constant. 130 00:06:14,900 --> 00:06:19,460 Next, we use a Vue object, 131 00:06:19,460 --> 00:06:21,320 which we didn't create ourselves, 132 00:06:21,320 --> 00:06:25,710 but which instead is exposed by this Vue framework code, 133 00:06:25,710 --> 00:06:29,910 which we are loading before our code executes. 134 00:06:29,910 --> 00:06:31,510 And that's why it's so important 135 00:06:31,510 --> 00:06:35,460 that we load it before our code executes. 136 00:06:35,460 --> 00:06:37,340 Because we now use the view object 137 00:06:37,340 --> 00:06:40,480 from this view framework code base, 138 00:06:40,480 --> 00:06:44,487 and on this view object, we can now call "createApp". 139 00:06:45,360 --> 00:06:49,763 That's a method provided by Vue here on this Vue object. 140 00:06:50,910 --> 00:06:53,910 And to createApp, we pass our TodosApp. 141 00:06:53,910 --> 00:06:56,363 So our constant here, which has this shape. 142 00:06:58,340 --> 00:07:02,050 And now on this created app so on the return value 143 00:07:02,050 --> 00:07:04,920 of createApp which turns out to be an object 144 00:07:04,920 --> 00:07:07,173 we call the "mount" method. 145 00:07:08,050 --> 00:07:09,650 And this is now a key method, 146 00:07:09,650 --> 00:07:12,170 which allows us to connect this Vue app, 147 00:07:12,170 --> 00:07:13,320 whatever it might do, 148 00:07:13,320 --> 00:07:15,050 We don't know that yet, 149 00:07:15,050 --> 00:07:17,540 but it allows us to connect this TodosApp 150 00:07:17,540 --> 00:07:19,456 this view managed app here 151 00:07:19,456 --> 00:07:24,456 to a certain part in our User Interface, in our HTML code. 152 00:07:25,570 --> 00:07:26,840 And in this case, 153 00:07:26,840 --> 00:07:30,630 I want to connect it to my main element here, 154 00:07:30,630 --> 00:07:33,870 because I plan on using Vue for working 155 00:07:33,870 --> 00:07:37,080 with that form and that unordered list. 156 00:07:37,080 --> 00:07:39,830 And you want to control a parent element 157 00:07:39,830 --> 00:07:43,810 of the HTML content that you want to manage with the Vue 158 00:07:43,810 --> 00:07:47,690 with help of this mount method here. 159 00:07:47,690 --> 00:07:52,150 So to this mount method, you want to pass a CSS selector, 160 00:07:52,150 --> 00:07:53,770 typically an ID selector, 161 00:07:53,770 --> 00:07:58,430 starting with a hash symbol like todos-app. 162 00:07:58,430 --> 00:08:00,440 The name is up to you though. 163 00:08:00,440 --> 00:08:02,410 Which then has to be an ID that 164 00:08:02,410 --> 00:08:06,720 is assigned somewhere in your HTML code like this. 165 00:08:06,720 --> 00:08:09,650 And the ID should be assigned to an element 166 00:08:09,650 --> 00:08:11,910 that contains all the other elements 167 00:08:11,910 --> 00:08:15,140 with which you want to interact in the future. 168 00:08:15,140 --> 00:08:18,460 And I in the future want to interact with that forum. 169 00:08:18,460 --> 00:08:20,320 And with that unordered list 170 00:08:20,320 --> 00:08:22,570 from inside my Vue app. 171 00:08:22,570 --> 00:08:25,240 Therefore, I take a common parent element, 172 00:08:25,240 --> 00:08:29,270 so an element that is uh ascendant of both the form 173 00:08:29,270 --> 00:08:31,050 and the unordered list in the end. 174 00:08:31,050 --> 00:08:33,210 And that is my main element here. 175 00:08:33,210 --> 00:08:35,150 And I give it an ID, 176 00:08:35,150 --> 00:08:39,210 which I then use for mounting my app onto that element. 177 00:08:39,210 --> 00:08:40,700 So that might TodosApp, 178 00:08:40,700 --> 00:08:42,100 which is managed by Vue, 179 00:08:42,100 --> 00:08:44,273 is connected to this main element here. 180 00:08:45,520 --> 00:08:48,550 Now at the moment, we got no logic for dealing 181 00:08:48,550 --> 00:08:52,240 with the forum or doing anything with the unordered list, 182 00:08:52,240 --> 00:08:54,573 but this is an important first step. 183 00:08:55,960 --> 00:09:00,941 Now that we did this, we can go back to HTML, to index.html. 184 00:09:00,941 --> 00:09:05,070 And now in there, let's say here, in this main element, 185 00:09:05,070 --> 00:09:07,520 we could add an h2 element. 186 00:09:07,520 --> 00:09:10,870 And here we now use a special syntax, 187 00:09:10,870 --> 00:09:13,380 special text, you could say, 188 00:09:13,380 --> 00:09:15,003 which we haven't used before. 189 00:09:15,970 --> 00:09:18,190 We use double curly braces. 190 00:09:18,190 --> 00:09:20,370 Opening and closing so to say. 191 00:09:20,370 --> 00:09:22,980 And between those curly braces, 192 00:09:22,980 --> 00:09:25,350 we place this key name. 193 00:09:25,350 --> 00:09:27,350 So the name of the property, 194 00:09:27,350 --> 00:09:29,140 which we set up in this object, 195 00:09:29,140 --> 00:09:31,610 which we return inside of data. 196 00:09:31,610 --> 00:09:33,373 In my case, newTodo. 197 00:09:34,560 --> 00:09:37,343 We output this between the double curly braces. 198 00:09:39,010 --> 00:09:42,840 If you do all of that and you save everything, 199 00:09:42,840 --> 00:09:44,530 if you reload your page, 200 00:09:44,530 --> 00:09:47,510 you should see "Learn Vue.js!" here 201 00:09:47,510 --> 00:09:51,973 or whichever texts you entered here in this string. 202 00:09:52,920 --> 00:09:56,040 And this hopefully, looks a bit special 203 00:09:56,040 --> 00:09:59,810 because this text is showing up here on the screen, 204 00:09:59,810 --> 00:10:02,480 even though it's not part of our HTML page. 205 00:10:02,480 --> 00:10:06,770 There, we have this strange placeholder syntax here, 206 00:10:06,770 --> 00:10:10,200 but that's Vue doing some work behind the scenes. 207 00:10:10,200 --> 00:10:13,203 And it's actually doing a lot of work behind the scenes. 208 00:10:14,210 --> 00:10:18,390 We connected it with this mount method to the main element. 209 00:10:18,390 --> 00:10:20,670 And that means that this main element 210 00:10:20,670 --> 00:10:24,030 and all the content in there, including all the content 211 00:10:24,030 --> 00:10:28,650 of all the descendant elements, will be scanned by Vue. 212 00:10:28,650 --> 00:10:31,890 And it will look for a special syntax like this one here, 213 00:10:31,890 --> 00:10:35,660 which is a special syntax recognized by Vue. 214 00:10:35,660 --> 00:10:39,040 And if you dive into the official Vue documentation, 215 00:10:39,040 --> 00:10:43,270 you will also find this special syntax there of course. 216 00:10:43,270 --> 00:10:46,480 That special syntax Vue will look for. 217 00:10:46,480 --> 00:10:50,920 And what Vue does then, is it swaps this special syntax 218 00:10:50,920 --> 00:10:52,740 for a concrete value. 219 00:10:52,740 --> 00:10:55,940 Because this syntax, with the double curly braces 220 00:10:55,940 --> 00:10:59,350 opening and closing, is called Data Binding. 221 00:10:59,350 --> 00:11:04,350 We bind some data to displace in our HTML document. 222 00:11:04,750 --> 00:11:06,730 Which means Vue will be responsible 223 00:11:06,730 --> 00:11:09,880 for outputting some data in that place. 224 00:11:09,880 --> 00:11:13,950 And that data that can be output here has to be registered 225 00:11:13,950 --> 00:11:18,280 in this data method to be precise in the returned object, 226 00:11:18,280 --> 00:11:21,100 which is returned by that data method. 227 00:11:21,100 --> 00:11:23,210 And then Vue we'll take this key, 228 00:11:23,210 --> 00:11:25,230 which it finds here in our placeholder 229 00:11:25,230 --> 00:11:27,340 and take the value for that key, 230 00:11:27,340 --> 00:11:30,253 and output the that here in this h2 element. 231 00:11:31,610 --> 00:11:35,200 Now, if you inspect this in the browser dev tools, 232 00:11:35,200 --> 00:11:38,000 you'll see the real content here as well. 233 00:11:38,000 --> 00:11:41,150 If on the other hand, you view the page source, 234 00:11:41,150 --> 00:11:44,040 you will see this placeholder here. 235 00:11:44,040 --> 00:11:45,890 Because when the page was loaded, 236 00:11:45,890 --> 00:11:48,560 the content was not yet injected. 237 00:11:48,560 --> 00:11:51,520 Because Vue is not a service site framework, 238 00:11:51,520 --> 00:11:54,520 we have no backend or server side for this app. 239 00:11:54,520 --> 00:11:56,770 It's a browser site framework. 240 00:11:56,770 --> 00:12:00,630 So the originally loaded page did have that place holder, 241 00:12:00,630 --> 00:12:03,830 but then we loaded our scripts and they executed, 242 00:12:03,830 --> 00:12:06,850 as they always do, if you include them. 243 00:12:06,850 --> 00:12:09,570 And because of that, and because of our code there, 244 00:12:09,570 --> 00:12:13,040 Vue then became active, and scanned the DOM 245 00:12:13,040 --> 00:12:16,860 after the page was loaded to find placeholders like this, 246 00:12:16,860 --> 00:12:20,620 and replace them with some concrete values. 247 00:12:20,620 --> 00:12:23,270 And behind the scenes, Vue of course does a couple 248 00:12:23,270 --> 00:12:25,810 of very important things for us. 249 00:12:25,810 --> 00:12:28,230 It selects this h2 element then 250 00:12:28,230 --> 00:12:31,020 and sets the text content off that element 251 00:12:31,020 --> 00:12:33,370 to a certain value. 252 00:12:33,370 --> 00:12:37,360 And that is what I mean with Declarative Approach. 253 00:12:37,360 --> 00:12:41,047 We don't tell Vue to select the h2 element 254 00:12:41,047 --> 00:12:43,340 and then set the text content. 255 00:12:43,340 --> 00:12:46,070 Instead, we have the desired end state 256 00:12:46,070 --> 00:12:48,010 which is that we have an h2 element 257 00:12:48,010 --> 00:12:50,390 with some content inside of it. 258 00:12:50,390 --> 00:12:53,120 And we set up which contents that should be. 259 00:12:53,120 --> 00:12:54,720 And we then leave it up to Vue 260 00:12:54,720 --> 00:12:56,480 to figure out how to get there 261 00:12:56,480 --> 00:12:58,800 and how to update the DOM. 262 00:12:58,800 --> 00:13:03,800 And this code here, combined with this, is arguably easier 263 00:13:03,810 --> 00:13:06,780 than writing all these instructions Step-by-step 264 00:13:06,780 --> 00:13:08,823 with just JavaScript. 265 00:13:09,780 --> 00:13:12,780 But of course still, this is just some static content 266 00:13:12,780 --> 00:13:14,460 which never changes. 267 00:13:14,460 --> 00:13:16,640 And if that alone would be our goal, 268 00:13:16,640 --> 00:13:18,860 we wouldn't need Vue.js. 269 00:13:18,860 --> 00:13:21,540 We could have just written this text here 270 00:13:22,590 --> 00:13:24,793 in this h2 tag just like that. 271 00:13:25,660 --> 00:13:27,910 Instead, we of course do use Vue 272 00:13:27,910 --> 00:13:31,110 because we want to build a dynamic User Interface 273 00:13:31,110 --> 00:13:36,110 where Vue also manages changes on the User Interface for us. 274 00:13:36,240 --> 00:13:38,063 And that will be the next step.