#100DaysOfWeb in Python Transcripts
Lecture: What does a simple Vue.js app look like?
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: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: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: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.