Raise your hand if you love remembering the syntax, to write a for

loop in JavaScript.

I can't see you of course, but I'm willing to guess there aren't a ton of hands up.

A lot of programming involves looping through items in an array, and

doing something to those items.

Maybe you're pulling out specific information,

sorting the lists in some way, attaching event handlers.

There are a ton of reasons why we might wanna loop through a list.

If you've built a JavaScript application in the past, you may have looped

through a list, and used the information to build up a string of HTML.

Perhaps that string of HTML grew large and unwieldy, not so with Vue.

I have here an array containing the seven colors of the rainbow.

What we wanna do, is use Vue to loop through and

display the name of each color in the rainbow.

If you wanna follow along with me, download the starter files below and

open up the index.html file in the folder called Rainbow.

We'll start by creating a new Vue instance in app.js.

Remember the Vue instance takes an object, and

we'll attach our new Vue instance to an html element with an ID of colors.

Don't forget the hash.

Now let's create a data object.

Inside the data object I'll name a property rainbow.

And set its value to this array up here, called colorsOfTheRainbow.

Notice this time, I'm setting the data property rainbow to the name of the array,

rather than dropping the entire array directly into the data object.

This is just another way to keep things a little cleaner and more organized.

This should be all we need here, so I'm going to save and head over to index.html.

Here I'll create a div with an id of colors.

Remember, I am calling it colors,

because that's the name we gave the root element of our app.

Inside our app, I'll create an unordered list element with a single list item.

To loop, we're going to use a view directive called v-for on the element that

we wanna iterate, the list item.

I'll pass v-for the argument color in rainbow,

this is a lot like a for in loop in JavaScript.

The first word represents the single item in the list we're looping through.

In is the keyword indicating that we're looping through a list, and

the final word is the name of the list that we're looping through.

So the second value here is the object or array I wanna loop through or iterate on.

It must be a referenced by whatever you've called the array or object in your data.

So if I wanted to display my list of colors, this

must be called rainbow because that's the name I've assigned to my array of colors,

in the data property on my view instance.

The word color here is arbitrary, meaning I could call it anything.

Because it's simply a word or an alias,

that represents each item in the list as I'm looping through it.

Now that I've attached this Vue directive to my element,

inside of it I can use the word color to represent each piece of data in my array.

So I'll demonstrate this by putting the word color here in between curly braces.

Let's open up the browser and take a look.

You can see that all of my colors are displayed.

Keep in mind that I could use any word here.

And as long as it matches what's between the curly braces,

you will automatically display each item in the list.

So I could change this to item, thing, or basketball.

And it's still going to work just the same.

However, we always wanna strive for clear and descriptive aliases,

so let's go back and change it back to color.

Also keep in mind that v-for should be placed

on the item that you want to iterate.

In other words, we wouldn't wanna put it on the ul element,

if we did that, well, let's see what happens.

If we inspect our HTML structure, you can see that the unordered list is

repeated with a single item inside for every item in the array.

That's not what we want, so let's undo these changes.

So now that I've set up a template,

I can structure my HTML around this template variable however I'd like.

And that structure will be used for each item in the array.

For example, let's change the actual color of the text.

We can do that by using the v-bind directive with a modifier called style.

This allows us to access and

change style attributes, sort of like writing in-line CSS.

I'll use v-bind to set the CSS style

attribute to the colors listed in our array.

The style modifier takes in object, and then I'll say color, set color to color.

The first property here refers to the style attribute called color

on this particular HTML element.

The second value refers to the item in our list.

So again, I could change this to anything as long as it matches the alias we've

chosen to represent each item in our array.

So I will change it to item to demonstrate.

So we're saying, get the color attribute of this element and

change it to whatever the value of item is.

So we'll set the color to the word red or orange or yellow and so on.

So let's refresh the preview, and you can see that by the magic of view,

we're looping through each item in our array, and

setting the style property to the correct color.

The v-for directive accepts an optional index variable,

which will give me access to the index of each item in the list.

To add the second option, I can put both arguments in parentheses.

Like so, now we have access to index as the template variable, so

I can display the index of the item as well.

And there you go.

Handy, yes?

Without the help of view,

we'd need to repeat each list item seven times in our HTML.

Manually set each list item to the correct color, and

change the CSS color attribute of each element as well.