WEBVTT 00:00.090 --> 00:02.130 Hello everyone and welcome back. 00:02.160 --> 00:08.300 In this lesson we're going to learn how to use the V for directive to render lists of elements in our 00:08.370 --> 00:09.300 web pages. 00:09.300 --> 00:11.040 Let's get started. 00:11.040 --> 00:15.390 Here we are in business in your code and as you can see as always I have created a new age the email 00:15.390 --> 00:19.370 file for this lesson and a new main the J.S. file. 00:19.770 --> 00:25.050 What I've also created the instance that we are going to use as we've said in this lesson we're going 00:25.050 --> 00:31.070 to talk about at least a rendering introducing a new view directive V for directive. 00:31.110 --> 00:37.170 Let's say REST API candies is sending us a list of users that we need to show in our web page. 00:37.200 --> 00:39.530 Let's see if we can do this using view. 00:39.600 --> 00:42.500 So yeah we can define an h1 tag. 00:43.010 --> 00:45.310 Users list. 00:45.610 --> 00:50.030 India in the data model which we need to define. 00:50.520 --> 00:52.380 We can create an array for example. 00:52.620 --> 00:55.040 So users. 00:55.500 --> 00:56.220 So we are. 00:56.240 --> 01:06.880 Alice Bob Batman then Robin and maybe even Superman. 01:07.020 --> 01:11.670 Going back to the HMO file we can now define an unordered list. 01:12.180 --> 01:18.310 And yet inside we can use the least element tag and we can't automatically show it for as many users 01:18.310 --> 01:21.560 as we have in at least using the V for data active. 01:21.610 --> 01:30.790 So V for India in a very similar fashion to what you will do using Python we can do use it in uses and 01:30.830 --> 01:37.570 yeah we can simply use the curly braces plus the value of that specific user. 01:37.590 --> 01:41.620 Let's now open up the Chrome browser which I've already opened here. 01:41.700 --> 01:48.450 So I'm just going to refresh the page and as you can see we now get a list of all the users in our users 01:48.450 --> 01:49.180 array. 01:49.350 --> 01:55.740 Considering that as I said this is very similar to what you will do in Python yet instead of user I 01:55.740 --> 01:58.850 could have specified something like Xa. 01:59.130 --> 02:04.300 OK so going back to Chrome refresh and this you can see the list is still here. 02:04.500 --> 02:10.650 But of course as you surely know most of the time in software development explicit is better than implicit. 02:10.650 --> 02:18.510 So let's go back to using user and David for DirecTV is really cool allowing us to show lists of elements 02:18.540 --> 02:23.290 as well without having to specify anything inside the data object. 02:23.310 --> 02:30.570 So let me show you how you can do this V for and for example let's say that for any reason we need a 02:30.570 --> 02:32.510 list of numbers from 1 to 10. 02:32.520 --> 02:45.730 So number in turn you can just use number like so and maybe we can add another paragraph numbers from 02:45.730 --> 02:47.840 1 to 10. 02:47.860 --> 02:53.670 So let's go back to the browser refresh and it is at least awesome. 02:53.680 --> 02:59.740 Let's make a bit of a more advanced example because most of the times especially when dealing with users 02:59.800 --> 03:06.220 as we've seen in the previous sections about building the rest api is most of the times we would get 03:06.280 --> 03:09.750 more than just the name of the single user. 03:09.790 --> 03:20.530 So either they can define I.D. something like five six seven then of course to name and yet we can pass 03:21.950 --> 03:30.470 Alice in their profession and we can make Alice a developer of course. 03:31.170 --> 03:34.240 Jennifer let's add four more. 03:34.250 --> 03:36.400 One two three four. 03:36.970 --> 03:48.300 So first of all these eight nine 70 and this is going to be of course 71. 03:49.050 --> 03:50.580 So yeah we have 03:54.680 --> 04:10.260 that we have lots more than we can make manager then we have Robin it again maybe be a designer and 04:10.260 --> 04:16.190 then we have Superman of course that's this can be a developer just as well we need to have some commerce 04:16.200 --> 04:16.880 of course. 04:16.890 --> 04:17.100 One 04:20.070 --> 04:27.320 three let's now go back to our HDMI file and considering that I've imported the bootstrap CDM let's 04:27.320 --> 04:36.850 make a bit of a more advanced example so yeah I can define a diva of glass card like so. 04:36.860 --> 04:49.900 And yet another diva of glass cards body endure two paragraphs one and two with name 04:52.760 --> 04:53.700 and profession. 04:53.930 --> 05:00.320 And so similarly to what we've done in the previous example we can use V for once again always with 05:00.410 --> 05:09.380 user in users and we can now simply reference all the different attributes of the users so user dot 05:09.650 --> 05:17.260 name and then yeah this is going to be of course user dot profession. 05:17.360 --> 05:23.400 So let's go back to cruel and let's refresh the page and we have a list of users. 05:23.510 --> 05:24.420 Awesome. 05:24.530 --> 05:30.050 It's important to note that most of the times when using before in a context like this one it's whether 05:30.050 --> 05:32.070 to pass a key attribute to a viewer. 05:32.100 --> 05:36.080 Yes so that it can keep track of all the nodes that it's creating. 05:36.560 --> 05:40.090 And most of the times if you have a feels like idea like we do. 05:40.250 --> 05:42.260 That's a perfect field to pass to key. 05:42.710 --> 05:48.770 So yeah you can do something like this one 10 year bind on key. 05:48.830 --> 05:54.260 Remember the column by end user dot I.D.. 05:54.290 --> 05:59.180 And if you now save and go back to the browser let's refresh at least. 05:59.480 --> 06:05.150 As you can see everything is still here but passing key will also make that up much more robust. 06:05.300 --> 06:09.070 That was it for this electorate about police rendering and before in Georgia yes. 06:09.080 --> 06:09.690 In the next one. 06:09.710 --> 06:14.120 We're going to talk about another very important and useful tool computed properties.