So if you go to svuejs.org here. This is the best place to get started has some very helpful tools and recommendations, documentation. And we're going to be spending quite a bit of time in this course directly on the site because even though I'd love to say that I could teach you how to do every little thing in vue that is not possible. Every single application is unique.

Every project you're going to build is going to have some unique requirements and so my goal in this course and really in any course I do is to teach you instead how to learn a framework or how to learn a language so that you can go out and you can build anything yourself.

So I'm going to take you through the same process that I follow when I try to teach myself a new language or framework.
So the way to get started here for our project is go to learn click on guide and then if you scroll down into the getting started section this is going to give you some script tags.

So we have a development script tag and then we have a production one. Now this production one is what you would use if you were deploying this application and you were embedding the view script inside of it. It's minified. It doesn't have helpful error messages because you don't want helpful error messages on the server.

Instead you'd want this development version. Now before we just copy and paste this I want you to just copy this entire script first and then open up the URL so if you hit enter when you go to the URL you can see this and the reason why I want to show this to you is because I think a lot of people especially ones that are newer to development kind of think of these frameworks as having the level of being a black box or a level of magic to them just because they do a lot of different things for you.

But at the end of the day all the vue source code is is a set of javascript functions and variables. You can scroll through all the lines of code here and if you're familiar with javascript even though many of these may look very advanced I don't want you to worry about that part. Instead what I want you to realize is that all vue.js is, is a javascript file.

It's a giant one and it gives you the ability to have all kinds of helpful tools you can implement into your application. So any time that you're calling something in vue J.S. all you're really doing is calling a vanilla javascript function class variable or anything like that. Just like if you build it yourself.

And so what we're able to do here though is we're able to leverage all of the work that other developers have done that have worked on the vue JS library and bring that into our own project. So what I want you to do is you can click out of here and you want to copy the entire script tag just like this. And then I want you to go and put it at the head of the HTML file so if you copy that and you can just click Control C or just copy just like this.

You can come under the link tag here and then just paste this in and that is all you need to do to integrate vue into your application. Now let's test this out to make sure that it's working. So if you come down here and scroll all the way down to the HTML and very shortly we're going to move all of the style code into its own file just because it'll save time in the tutorials and also just because it's a best practice.

So if you come to where it says branding guidelines updated where we'd updated that H2 file any of these three paragraphs. Let's come here and inside of here let's create a new div. I'm going to create a div and I want to give this div a class or I'm sorry I will give this div an id say id="app" and so inside of a our app div let render a H2 so I'lll say h2 HI and then I'm going to call and have vue pass in some data before we can do that we actually have to initiate and build our very first view component.

So let's scroll all the way down to the bottom of the file and right above the body tag we can add a script tag. So this is where we're going to be writing all of our view code in this section. So the way that you can create a new component inside of view is by saying new Vue just like this. And then at the end of the day view is just a function so we can see a new vue pass in friends and then vue expects an object.

So pass in curly brackets and now here the very first thing that you have to give vue is a set of key value pairs and the first one has to be the element. So the el stands for element and this is telling in vue what element to bind to. So we passed in our selector so because we use an id I can say the hash symbol followed by app and what that's going to do is it's going to tell view to look on the page find a element that has the hash symbol app so it's an ID with the name app and then it is supposed to bind directly to that element so that by itself doesn't really do anything.

So let's actually add some data so we can add in a key called data here and it does have to be called data and then from there data expects an object and so any time that you want to pass in any data whether it's from an API something hardcoded anything like that. This is where we're going to do it. So I'm gonna say name and then I'll pass in the word Christine hit save and now if we scroll up.

So if you come up to where we had our little app div break here the way that we can access that name is by using two curly brackets so I can say two curly brackets here name end it with two more two more curly brackets and what this is going to do is when a vue has bound a component to a div, to an element like we've done right here it's going to look inside of that entire element and then any time that it finds curly brackets like we have right here when it finds two curly brackets I should say is then going to run any vue code inside of here.

So when this is going to give us access to grabbing that name variable. So if you hit save and then switch back and go to our live updated server you can see it now says hi Christine. So notice the high was just text we added in HTML but the Kristine part. This was added inside of our data component. So that's how you can access that data. Now if I come over here and let's say copy this and I go outside of that app component.

So this is right here a view component or it's what the view component is bound to. Anything else side of that is not going to be recognized as view code. So if I switch back now you can see that this still works but this prints out just the regular curly brackets just like it would in normal circumstances.

So if you ever find yourself in a situation where you see double curly brackets inside of your project then you may be outside of the element that you've been bound to. So just a little heads up there. So that is how you can integrate your very first vue component how you can implement a div that has a view element to it and it doesn't have to just be a div you could do this to a span or anything like that. A div is just one of the more common ways of doing it. And then also how you can add data to that component and then access it from within the vue.

Resources

• Project Source Code