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.