#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Top ten button
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So we have our searching working well but what I'd like to do is also have a button that'll say 'Show me just the top ten movies
0:06
by IMDB score,' and also we're going to get one for genre later. So we're going to have a couple of controls down here. Let's work on that.
0:12
You'll see, sort of a real similar thing to what we just did. So in this section, I would like to have a div subcontrols, like so.
0:20
And then we're going to put a couple things in here. We're going to have a hyper link. That doesn't have anything there.
0:25
It's going to have a class equals top_10, like so and here it'll just say top ten. Come over here, now we can see our button
0:31
but, clicking it doesn't do anything. Well, that's because we haven't added any sort of event. So here we capture the key up event.
0:39
We can be more general, it can say @click and capture a whole bunch of them and what we want to do is have a function called top_10
0:46
We don't have this yet, let's go write it. I noticed, the Vue plug in is helping us. Now, it knows about search it knows that that's not there.
0:53
That's awesome. So we'll go over here and just for now we'll just duplicate this, real quick. Let's call that top_10
0:59
and let's just change this text here to what would've loaded top ten, like so. We come back over here, refresh it.
1:07
If we come back over here, refresh it, and view console. Come in here, and see if our test is still working
1:15
but if we click here, would of loaded top ten, test two. So we can cycle between these different views. The search results, the top ten
1:23
we also want to have the genres but we'll get to that in a little bit. Alright, so, really really close. We're going to be able to take these functions
1:30
point them at our web service and not just get this fake data here but get some really cool behaviors.