#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Creating the Vue app instance
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So you saw Movie Exploder had some starter code but let's get started writing some actual code. The first thing we need to do
0:07
is to create our Vue.js application. So, we're going to go over here and we're going to allocate a new Vue instance. And in here we're going to put
0:19
just a settings object, like so, an anonymous JSON object. So, we're going to put it in here and going to
0:24
have a couple of things, we're going to have el which is going to be the element that is the root of the application.
0:30
You can actually target only subsections of your page if you'd like. And so, in here we're going to have something called an app
0:36
and we want to specify that by id. So the element with id app. Great, we haven't created that yet we're going to do that next.
0:42
And then we have data that we want to synchronize with our HTML in a two-way binding style.
0:48
So we're going to come over here and we're going to put a little another sub object here and we're going to have things like search_text.
0:54
And in the beginning, I'm going to put nothing but we can have many more things not colon, that equals colon. So we go like this
1:02
and then, I think that'll probably be a good start. We can go with this, there'll be a lot more that we can do
1:08
WebStorm it's just, it's PyCharm has, would as well. Propose that we would want to include this, we want to say
1:15
don't worry about that, don't tell us there's an error. So, everything is good here. Another thing, I think this is my Python tendencies
1:21
these days, JavaScript will auto-close all the lines by adding semicolons. So, we could put a semicolon here
1:28
but you'll see that you really don't have to. In fact, almost all of JavaScript can be rewritten without semicolons and have no effect.
1:34
So that's my preference, if you want add a semicolon there. Okay, so here's our application in the JavaScript side.
1:39
Now for this to do anything interesting we have to come over here and update our code. So we have our Vue stuff at the bottom
1:47
basically thing with an id equals app has to have been defined in the DOM prior to those two scripts being included the way we've written it.
1:56
Okay so, inside here everything we do with Vue has to be within this part 'cause remember this is the root of our application.
2:02
So inside of here, let's just have an input. Type equals text and let's have a div and let's just give it, we're going to delete this so
2:11
just be kind of crazy here, we'll say color is green. Alright now, we would like to show the string, search_text
2:21
and we're going to show it in two places actually. In order to do that we put double Handlebars double Mustaches, and then we have the value.
2:27
Now right now there's no help we know there's, that it's not highlighted there's no help, you'll see a way to make
2:32
the tooling work better with Vue.js in a moment but let's just do our little starter app here. Okay so, we've got our search_text here
2:40
and if we actually had put a value and then we go over here and we refresh it you can see here's our initial value.
2:47
Pretty cool, so we were able to use the double the double Handlebars syntax here and just say the value of the data.
2:52
And we can also go over here and bind it to the input but the input we want a two-way binding that's more interesting.
2:58
Change the input box, it changes the text. You change the text, it changes the input box. So here we can say v-, almost all the Vue.js commands
3:05
or attributes, start with v-. So I'll say v-model, equals search_text. Now if we run that again, you can see it's over here it is now bound.
3:15
And see how when the text box changes the value of the thing changes we can do that in reverse too, like check this out.
3:20
If we had written some code, somehow, somewhere that had gotten ahold of our Vue.js app and we can't quite do that yet.
3:27
Let's just throw this in here as app equals go refresh this, now we can say app.search_text equals ABC, boom.
3:35
So you notice, if we change it in JavaScript it changes up here and go, change it up here and now we ask again, this time we ask for the value
3:43
alright it's bidirectional. Really cool, so we've got our binding going here and we're going to use this as a search field
3:49
to drive a results of movies, a whole series of movies that come out as we interact with it. It's going to be super fun.
3:54
So that's our first step in getting our Vue.js app created. Now notice, we only wrote that line right there so that we could interact with it.
4:03
We can install some extra DevTools that will make that line not necessary but for now it's really
4:09
it's not that big of a deal, so I'm just going to leave it. Alright, so that's it, we have our Vue object we allocate it with specifying the app root
4:16
and the data being bound. And then, we go over here and we specify the model and we can also do double Handlebar expressions
4:24
to basically string, just get the string output of these elements.