#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: What does a simple Vue.js app look like?
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Before we start writing our Vue.js based application I want to give you a quick flyover a little bit like a hello world
0:08
but a little more than that right? What does a really simple functioning Vue.js app look like? Well as you can imagine there's a JavaScript part
0:17
and there's an HTML part. Let's start with the JavaScript side of things. So over here when I have a file called site.js I create a new view class.
0:25
And to this class we're going to pass a bunch of options as a JavaScript dictionary anonymous object. So we pass el.
0:33
This is going to be the CSS selector that is going to find the part of the page that our app controls. We don't just run Vue.js on the entire page.
0:40
We pick a segment of the page and save this part. That could be the whole page or it could just be a little part of it.
0:46
Then we're going to have two things here. There's more we could bring in to work here but just two for now. We're going to have data.
0:53
So we're going to have variables that are synced to the page so we have search text. We can have many more. And this is going to be a two way binding.
1:00
We're going to take whatever the value here is and put it in what it's synced to and if that changes in the page it changes this variable.
1:06
If this variable changes it changes what's in the page automatically. Also we're going to have functions that can be called methods.
1:12
So we have a search function that when a search operation is called or triggered it's going to call search
1:18
and search of course has access to the search text and this is the same object. Alright that's the JavaScript side.
1:23
We're going to inject that onto some HTML. Over here we have an app. It has an div with an id of app, that's the el that maps over.
1:30
We have an input that's like a text box right? Type equals text and two things are happening here.
1:34
We're saying we'd like to have a two way data binding between search text and the value of this input. So v-model is how you say that in Vue.js.
1:43
And we'll just say search text and it's going to keep those in sync either when the text box changes or when the value of the variable changes
1:49
it'll change the text box. We also want to catch when somebody hits enter to trigger the search. We don't need a button.
1:55
You can just press enter and off it'll go. So we're going to hook the event keyup.enter and we're going to call the search function
2:01
back on the same object. That's it. That's an entire app that actually does all the data binding. You know if we had the search details implemented
2:08
it could do the search and theoretically show it on the page somewhere. Just include Vue.js. Include our on JavaScript and that's it.
2:15
We're off to the races. Nothing else has to be done. Cool right? Let's build something like this but way more interesting.