So at this point, we've set up View pretty basic, right? This concept of data binding, we made some data attributes there, a message, and it says, Hello, View and Name. And then inside of our app where it says ID app, it says Message and h1. The next thing I don't want to do is make an input field. And so I'll just write input and it, a text input field is fine. And then we'll talk about this concept of the model and this data here basically represents our model. Now, if you're familiar with that concept of Model View Controller, that's kind of, I guess you could say View is, is I'm a model and view. And again, there's bunch of different libraries and things that abstract stuff away, but here you have your model and here you have your View data. And it's really that simple. You just kind of go and connect and reference.
And so to write something like this, I can say View a or V-model, and then it equals a value, and I'm going to say it is equal to the value of message. Now, if I refresh this, you'll see the value from message went into the V model, which is going to act like the value of the input field. And this is where that data binding comes in and makes it really cool and really easy to start to work with View. If I change the value inside this input field, it dynamically changes on the fly, the actual Dom of that paragraph, or the value that I have set for it.
So I could write whatever I want into this value. And it'd be set up. Now, if I set up a second value, this one I'm going to call, Name, and I refresh, you'll see, I have both of them now in the value. So I can say Babadoo maybe, and it data binds the value from the input field to the value of of the HTML of the h1.
So, you can see very easy to start to build something that could be pretty cool. If we want to take this a little bit further, maybe we want to apply some style changes to our elements. Maybe change the, some colors or something like that. So that's pretty easy to do as well. Let's make another field. I'm going to put this whole thing inside of a Div and maybe add some CSS. So let's try this out. So, first thing, I'm going to reference a style sheet. So I'll say link. And then it's going to say, "Where is my style sheet?" I'm going to say it's at style.CSS. I'll make a new document and I'm going to call it style.CSS. I'm going to put this in the same directory here that I had previously.
So now you can see it's in that directory. So from there, I can then start to write some CSS. So I'm going to say CSS is a box, give it a width 500 pixels, give it a height of 500 pixels. And from here now let's give it a color. We'll say background, color, or just background is going to be, let's go with a red to start with. And now I can go and make this elements. I'll just go inside my app instance, I'll say.box. And I'll paste the Div down here and tab everything over. Kind of make it look nice. I'm going to get rid of the message field, think we get the idea for that. So now you can see I have a big red box here, and has my two input fields. I'm going to make a third input field, actually let's get rid of message. I think we're okay without message at this point, right? We get the idea. So now we're going to see just this. This is the value in the input field.
Now from here, I'm going to add a new rule that says color, and maybe we call it background color, or BG color. Now with these rules, you don't want to do like hyphens. You want to use an underscore or you want to use a camelCase syntax. So I'm going to go with camelCase syntax. So background color. And I'm going to specify that is equal to red. And I'll say that as a string, now you're going to put a hexadecimal color or whatever else you want to put in here. And I'll put a comma there on the first one and I can remove the comma on the second one, as we have our values. So now we have color and background color.
Now, if we refresh this, you'll see nothing actually changed. Maybe I'll change this to blue. So you can see that as it changes, and still nothing changes. We now need to take the BG color and apply it to the box. Well, we can do that with Inline style and it's actually pretty easy to get started with that. So, if we just put style in here like normal, and I set, background color, and I set the value, so I'll set the value like this. Blue, we'll say a BG color and refresh. You see it doesn't apply. And well that's, we might actually even have a console air. So open up our inspect and we'll say console. And it says air compiling Interpol inside has been removed. Use V-bind, Colon, shorthand for the value. So, if we go and specify with a colon here, you can see, this is what they're asking. It says, "Hey, use V-bind style," but that's not going to work either.
Well, there's a special syntax to work with this and working with styles. So, if we go to the documentation and you scroll down to, sometimes it's easier actually, just to type in the URL here. Style it's powered by Algolia, which is really awesome service. So class and style bindings, and then it has a binding inline style. So, that's what we're doing. And so here you can see the format it's style, colon, and then they want a bracket, and then the values. And for shorthand, you can just use Colon, you don't need to use V-bind, but if it helps you to get started with V-bind is going to be the same as Colon style as we've done here. So Colon style, and then we need to put those curly brackets in, and then we don't need to specify this inside brackets the same way we kind of did with model.
That's it we're set up. Note that there are commas here instead of semi-colons, which you might normally expect. Now, if we go back to our document and click refresh, you'll see it's blue. Well, that's pretty awesome, but you may say, "Hey, well, Trevor, I could have just changed the style to blue. Could not have?" I said, "Yeah, of course you could have." But we want to make this a little bit more dynamic and fun by using some of the data binding that we have with the View. So, let's make a new input field. And this time I'm going to say it's a color input field, and it has a V hyphen model and it's going to bind to the background color. So, we will paste in the background color. Now, if we refresh, you'll see, we have a color input field.
Now I'm using the default browser color input field and that works okay inside Chrome on a Mac, but you might have issues with the color input field on other browsers. And if that's the case or you want to style it, you should think about using a JavaScript package for building a color picker. And there are lots of ones out there. WordPress uses, for example, the Iris color picker, and it's pretty easy package to implement. So, and you can find that at Iris JS, if you Google that. So if you have the color put field, it'll open up this again, browser or Mac default. And if I go into the options here, either if I want to do it based on these color pencils or on here, and then you need to slide this color, you actually see it instantly changing the color values.
Now think about that in jQuery or just vanilla JavaScript. That's a lot of work to go and build something that goes and does this a couple, quite a few lines of code, and you can see how easy it was for us just to go in and implement a couple of simple lines of code to get started with that. So I'm going to close this and we'll move on to the next episode.