1 00:00:00,540 --> 00:00:03,456 Raise your hand if you love remembering the syntax, to write a for 2 00:00:03,456 --> 00:00:04,421 loop in JavaScript. 3 00:00:04,421 --> 00:00:09,320 I can't see you of course, but I'm willing to guess there aren't a ton of hands up. 4 00:00:09,320 --> 00:00:12,310 A lot of programming involves looping through items in an array, and 5 00:00:12,310 --> 00:00:14,420 doing something to those items. 6 00:00:14,420 --> 00:00:16,670 Maybe you're pulling out specific information, 7 00:00:16,670 --> 00:00:19,970 sorting the lists in some way, attaching event handlers. 8 00:00:19,970 --> 00:00:23,380 There are a ton of reasons why we might wanna loop through a list. 9 00:00:23,380 --> 00:00:26,460 If you've built a JavaScript application in the past, you may have looped 10 00:00:26,460 --> 00:00:30,960 through a list, and used the information to build up a string of HTML. 11 00:00:30,960 --> 00:00:35,300 Perhaps that string of HTML grew large and unwieldy, not so with Vue. 12 00:00:36,570 --> 00:00:40,460 I have here an array containing the seven colors of the rainbow. 13 00:00:40,460 --> 00:00:43,280 What we wanna do, is use Vue to loop through and 14 00:00:43,280 --> 00:00:46,050 display the name of each color in the rainbow. 15 00:00:46,050 --> 00:00:50,077 If you wanna follow along with me, download the starter files below and 16 00:00:50,077 --> 00:00:53,442 open up the index.html file in the folder called Rainbow. 17 00:00:53,442 --> 00:00:59,030 We'll start by creating a new Vue instance in app.js. 18 00:00:59,030 --> 00:01:02,411 Remember the Vue instance takes an object, and 19 00:01:02,411 --> 00:01:07,662 we'll attach our new Vue instance to an html element with an ID of colors. 20 00:01:12,943 --> 00:01:13,903 Don't forget the hash. 21 00:01:16,164 --> 00:01:17,840 Now let's create a data object. 22 00:01:20,280 --> 00:01:23,840 Inside the data object I'll name a property rainbow. 23 00:01:25,850 --> 00:01:29,563 And set its value to this array up here, called colorsOfTheRainbow. 24 00:01:33,823 --> 00:01:38,744 Notice this time, I'm setting the data property rainbow to the name of the array, 25 00:01:38,744 --> 00:01:43,830 rather than dropping the entire array directly into the data object. 26 00:01:43,830 --> 00:01:47,860 This is just another way to keep things a little cleaner and more organized. 27 00:01:47,860 --> 00:01:54,280 This should be all we need here, so I'm going to save and head over to index.html. 28 00:01:54,280 --> 00:01:56,453 Here I'll create a div with an id of colors. 29 00:02:01,100 --> 00:02:03,028 Remember, I am calling it colors, 30 00:02:03,028 --> 00:02:06,320 because that's the name we gave the root element of our app. 31 00:02:10,901 --> 00:02:15,070 Inside our app, I'll create an unordered list element with a single list item. 32 00:02:16,690 --> 00:02:20,321 To loop, we're going to use a view directive called v-for on the element that 33 00:02:20,321 --> 00:02:21,927 we wanna iterate, the list item. 34 00:02:25,830 --> 00:02:30,293 I'll pass v-for the argument color in rainbow, 35 00:02:30,293 --> 00:02:35,140 this is a lot like a for in loop in JavaScript. 36 00:02:35,140 --> 00:02:39,280 The first word represents the single item in the list we're looping through. 37 00:02:41,048 --> 00:02:45,680 In is the keyword indicating that we're looping through a list, and 38 00:02:45,680 --> 00:02:48,620 the final word is the name of the list that we're looping through. 39 00:02:49,840 --> 00:02:55,440 So the second value here is the object or array I wanna loop through or iterate on. 40 00:02:55,440 --> 00:03:00,390 It must be a referenced by whatever you've called the array or object in your data. 41 00:03:00,390 --> 00:03:03,030 So if I wanted to display my list of colors, this 42 00:03:03,030 --> 00:03:07,782 must be called rainbow because that's the name I've assigned to my array of colors, 43 00:03:07,782 --> 00:03:10,095 in the data property on my view instance. 44 00:03:14,475 --> 00:03:18,420 The word color here is arbitrary, meaning I could call it anything. 45 00:03:18,420 --> 00:03:20,820 Because it's simply a word or an alias, 46 00:03:20,820 --> 00:03:23,861 that represents each item in the list as I'm looping through it. 47 00:03:25,050 --> 00:03:28,040 Now that I've attached this Vue directive to my element, 48 00:03:28,040 --> 00:03:32,810 inside of it I can use the word color to represent each piece of data in my array. 49 00:03:33,980 --> 00:03:41,720 So I'll demonstrate this by putting the word color here in between curly braces. 50 00:03:41,720 --> 00:03:43,266 Let's open up the browser and take a look. 51 00:03:45,746 --> 00:03:48,650 You can see that all of my colors are displayed. 52 00:03:48,650 --> 00:03:51,610 Keep in mind that I could use any word here. 53 00:03:51,610 --> 00:03:54,960 And as long as it matches what's between the curly braces, 54 00:03:54,960 --> 00:03:58,380 you will automatically display each item in the list. 55 00:03:58,380 --> 00:04:02,031 So I could change this to item, thing, or basketball. 56 00:04:09,572 --> 00:04:12,390 And it's still going to work just the same. 57 00:04:12,390 --> 00:04:15,740 However, we always wanna strive for clear and descriptive aliases, 58 00:04:15,740 --> 00:04:20,460 so let's go back and change it back to color. 59 00:04:22,330 --> 00:04:25,410 Also keep in mind that v-for should be placed 60 00:04:25,410 --> 00:04:27,460 on the item that you want to iterate. 61 00:04:27,460 --> 00:04:30,424 In other words, we wouldn't wanna put it on the ul element, 62 00:04:30,424 --> 00:04:32,818 if we did that, well, let's see what happens. 63 00:04:44,978 --> 00:04:49,583 If we inspect our HTML structure, you can see that the unordered list is 64 00:04:49,583 --> 00:04:53,670 repeated with a single item inside for every item in the array. 65 00:04:54,770 --> 00:04:57,293 That's not what we want, so let's undo these changes. 66 00:04:59,993 --> 00:05:02,048 So now that I've set up a template, 67 00:05:02,048 --> 00:05:06,360 I can structure my HTML around this template variable however I'd like. 68 00:05:06,360 --> 00:05:10,920 And that structure will be used for each item in the array. 69 00:05:10,920 --> 00:05:14,780 For example, let's change the actual color of the text. 70 00:05:14,780 --> 00:05:19,270 We can do that by using the v-bind directive with a modifier called style. 71 00:05:20,300 --> 00:05:22,030 This allows us to access and 72 00:05:22,030 --> 00:05:26,119 change style attributes, sort of like writing in-line CSS. 73 00:05:26,119 --> 00:05:29,710 I'll use v-bind to set the CSS style 74 00:05:29,710 --> 00:05:32,860 attribute to the colors listed in our array. 75 00:05:32,860 --> 00:05:38,780 The style modifier takes in object, and then I'll say color, set color to color. 76 00:05:40,290 --> 00:05:44,610 The first property here refers to the style attribute called color 77 00:05:44,610 --> 00:05:47,190 on this particular HTML element. 78 00:05:47,190 --> 00:05:53,033 The second value refers to the item in our list. 79 00:05:53,033 --> 00:05:57,785 So again, I could change this to anything as long as it matches the alias we've 80 00:05:57,785 --> 00:06:00,910 chosen to represent each item in our array. 81 00:06:00,910 --> 00:06:03,848 So I will change it to item to demonstrate. 82 00:06:09,208 --> 00:06:12,865 So we're saying, get the color attribute of this element and 83 00:06:12,865 --> 00:06:15,410 change it to whatever the value of item is. 84 00:06:16,770 --> 00:06:21,310 So we'll set the color to the word red or orange or yellow and so on. 85 00:06:22,910 --> 00:06:27,269 So let's refresh the preview, and you can see that by the magic of view, 86 00:06:27,269 --> 00:06:30,343 we're looping through each item in our array, and 87 00:06:30,343 --> 00:06:33,363 setting the style property to the correct color. 88 00:06:33,363 --> 00:06:37,279 The v-for directive accepts an optional index variable, 89 00:06:37,279 --> 00:06:41,980 which will give me access to the index of each item in the list. 90 00:06:41,980 --> 00:06:47,233 To add the second option, I can put both arguments in parentheses. 91 00:06:52,052 --> 00:06:56,356 Like so, now we have access to index as the template variable, so 92 00:06:56,356 --> 00:06:59,193 I can display the index of the item as well. 93 00:07:12,807 --> 00:07:13,888 And there you go. 94 00:07:13,888 --> 00:07:14,887 Handy, yes? 95 00:07:14,887 --> 00:07:16,651 Without the help of view, 96 00:07:16,651 --> 00:07:21,540 we'd need to repeat each list item seven times in our HTML. 97 00:07:21,540 --> 00:07:24,990 Manually set each list item to the correct color, and 98 00:07:24,990 --> 00:07:28,170 change the CSS color attribute of each element as well.