Okay. So, let's go ahead and jump in and actually start writing some Vue.js code, and see what we can go and make. So, again, you could reference it on GitHub, and download the package or you can click 'Get Started' and I'm going to go with 'Get Started.'
And then, if you scroll down to the 'Get Started' under the docs here, you'll see JSFiddle, Hello World example. And JSFiddle is like CodePen pretty much. So, if you're familiar with CodePen, same concept.
And here we have some basics of our script here, which we're referencing, our JavaScript. We have a div ID of app, a paragraph with this bracket syntax and the word, message. Close paragraph, closed div. And then we instantiate our JavaScript with a new view, and then we select the element data. We take the data message, and we bind all of this, this together.
So I'm going to show this a little bit in more detail, and we'll set up a document to base it, be able to work with this. Now you can come in here, and type and if you like that more, you can go and set that up, but, I would prefer to go in and set up a document. And it's pretty easy to set up a document here.
So, what I'm going to start with here is go to, new folder, and I'm going to call it view, as the folder name. So, we'll call this view, and that's basically my project folder. Now, this has all been running the browser, so I don't need to set up a server, or anything else. It's ready to go.
I'm going to take, view and drag it into sublime, and I'll be using sublime. And if you have questions about any of these shortcuts, or maybe want to have those features for your setup, you can watch a series here on code time called, Getting Started with Sublime, and it'll show you the different packages that we use and the configuration we do to set up sublime.
So, once here, I'm going to right click on it and say new file. And I'm going to call it index.HTML. And then, I can type exclamation Mark tab, and it will write my HTML for me.
The next thing here, I want to reference the script to view JS. And again, there's a bunch of different ways to reference this. You could set it up with NPM, or yarn or something else it's completely up to you and how you want to go and do it. But for now I think this script source package here will work for us.
So from here, if we have our own JavaScript, we can write it down at the bottom, or we could include it as a separate file. I'm just going to write it down at the bottom for now. But as we get more view cope, we might make it into a separate file.
So I'll type script. Now, if you're familiar with jQuery, you need to do a document on ready or window ready. Don't need to do any of that with the view. You pretty much just put your elements inside of it.
So I'm going to go and paste in this code here that they provided VAR app. Well, align this up. So it's nice for app equals a new view. So we're making a variable of app and we're instantiating the view pack library or class you could say, and then element app and then data message. Hello view.
So data element app, this is our main thing. So anytime when we stand sheet view, we're going to need to specify an element that you're going to bind to. That's going to basically be that parent element that it's going to recognize as, Hey, the stuff in the sign there is view, and we're going to use the element ID of app, of course you can change it to whatever you want.
So let's go and make that we're going to say a pound sign app, and now we have our element there. Then underneath here, it says data and then message. Hello view. So data ... this is all we're going to set up our data that we need to go and reference throughout.
So we may be running Ajax call later on, or we may be setting some fields and we want to be able to manipulate these fields. This is where we can store up all are data and set up all our I guess you could say, call them variables.
They're not really variables, but were these parameters that you could go and use later on you're in your app and they could be a raise or objects or strings or integers, however you want to go in and set those up.
So that right now is just going to be the value message and key and value here. And then you can see from a demo, it's going to say hello view. So we now need to go and reference this message. So to reference this message is pretty simple. We're just going to say, "Message." And that's going to go in and grab the value here from the data and add it to the message. I'll make that nice and clean.
Now, if I take my folder and drag it inside the browser, you'll see it says, hello, view for my value. Now, if I wanted to do another one of these, just to show you the concept, I might say something like name equals Trevor. I then can go in and reference with the curly brackets name. And it says Trevor.
So now think about that for a second and how you might be ...because I think this is a very important concept and can be difficult. Again, view's not the easiest thing to just jump in there with, if you were writing this in jQuery and you wanted to add a value into it element, you would have to write a selector inside jQuery.
So dollar sign parentheses, probably pound sign app. Then inside that you would write a pen. So a method of a pen, and then the element that you want to append or the value that you'd want to append.
And you can see here that you don't have to write any of those selectors. You just give us a name and then you can reference this. And if we go in later on change the value here, we don't have to go in like redefine the element re append, it's data binding.
So taking the Dom here and our JavaScript and binding those elements together. So if I change one, it changes the other. And we'll see that furthermore examples as we go. So you can see it's very easy to go and reference. And if I wanted to put this inside of an H one, for example, name inside of an H one you'll see, very easy. It says now inside of an H one.
And I don't need to change any of my code. I don't need to write a new selector or anything like that. It just works because it doesn't care what element it's inside. It's just worrying about what's inside these brackets. So that's the basics for getting server that view. Let's go into the next episode and we'll add something cool to go in and change some of these values dynamically.