#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Repeating data and HTML blocks
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So far what we have is not that exciting. We have this search text up here and it has its initial value that is synced.
0:08
That's cool, but the real idea is we're going to go over here and we're going to search right here
0:12
and then in this bottom section we want movies to appear. A whole bunch of movies, and those are going to be coming out of a web service
0:19
and when we eventually get to that part. So let's go ahead and forget this for a moment. And what I want to do, is I want it to put a div
0:26
that has a class movies, then in here I want a div that is a movie, and I'd like to have maybe the title, okay?
0:35
We're going to use another view directive that lets you loop over a collection. So first let's have a collection. So in our data, let's have movies
0:43
and let's define that to be a list to say like, movie1, movie2, movie3. So we want to have these three movies listed out down here.
0:56
I mean we could even put this into a div that has a class title like this. How do we do that? Well, we've got this little bit down here
1:05
and that looks like something you can see some of the CSS styles are being picked up here a movie and title and so on, however
1:11
how do we get it to loop in Vue JS? Alright, this is not server side we can't generate that the way we had been in say, Chameleon.
1:18
So we go over here and we say v-for and then it's very Python-like it's for m in movies, like so. Notice that this turns purple
1:27
because it knows where it comes from and down here, remember the way we say text is we double curly brace it, then we just say the value.
1:35
Alright, this defines a loop variable it's something we can work with. Check this out, boom. Movie 1, 2, and 3. So easy. It's incredibly easy, right?
1:43
That's all we had to do is just type that out. And in these expressions, you can actually do interesting things, like I could
1:50
let's suppose I want this, the titles, to be all caps I'd come over here and say toUpper toLocaleUpperCase like this
1:58
and actually call that on the string boom, just like that, okay? So, we're going to loop over these items
2:03
and I'm going to generate a little piece of HTML more than that, but not too much more for each movie we get back from the service.
2:11
Eventually we're going to get to the service but we're going to actually just take some fake data until you sort of help design the site
2:16
and get everything working and then we'll implement the HTTP layer as well.