Creating a Vue App

[00:00:00]
>> So the question here is what do you need to know to really get started with Vue? And so earlier we talked about some prerequisites for the workshop but this is where I kinda wanna start us as far as ground zero goes. As long as you have familiarity with HTML, CSS, and JavaScript, and you have familiarity with the code editor, that is all you need.

[00:00:21]
And that might come as a surprise to people because a lot of times when we think about frameworks, we are thinking about it from a build tool perspective. But we're gonna go ahead and show you how this approach works and why it's actually a viable approach when it comes to a lot of organizations looking to either progressively migrate their into a framework.

[00:00:39]
So here's your Morpheus mean, from Matrix. What if I told you no build tools were needed? And so again, some of you will be understandably skeptical, but we're going to actually experience this live ourselves and go through what this is like. So with that said, has everyone had a chance to basically fork the repo sort of clone it down to make sure they have that environment ready to go?

[00:01:05]
Okay, great. So the first thing we're gonna do, we talked for a little bit now let's dive right into some code and check this out. So, inside of here, you'll notice that there's very little going on in here. There's no package dot JSON, there's no dependency. So Ron is basically a readme file here and we have a couple of HTML files for you to basically work with.

[00:01:29]
So what I'm gonna do is I'm gonna go ahead and open up my playground HTML file inside of the browser over here. So to make sure everything's working, I'm just gonna go ahead and do and each one with hello front end masters save refresh there we go, okay dev environment setup no build tools required great.

[00:01:51]
Now, when we think about building your first Vue app, I mentioned before because no build tools are required, what you can do is you can actually just drop Vue onto a page. And so the way we're gonna do that is we're gonna go ahead and go on to the Vuejs.orgdocs.

[00:02:07]
And if we go into the guide, I believe it's under Quick Start. We'll see. Here we go. There's a section here that says using view from the CDN. And all we're gonna do is we're gonna copy this line right here and drop it into our HTML file. It's all we're gonna do here is boom, paste that in.

[00:02:29]
And so to verify that this worked, that's something actually happened we're actually gonna go ahead and open up our browser console. And you'll notice here that one, it's already alerting us that we're running a development build of Vue. So in other words, if we're gonna deploy this, they're gonna need to use a production deployment, because the size is gonna be a bit larger but this is fine cuz we're learning right now.

[00:02:50]
So the way you can check the also that this is working is if you type view it'll autocomplete and you'll notice it'll basically bring up the view object that's ready for you to do stuff with it. And so what I'm gonna do right now is I'm gonna go ahead and just show you basically how that kind of works.

[00:03:06]
So what I'm gonna do here is we're gonna go ahead and we're gonna create a div and just like you typically would expect I'm gonna call it the div app that's all we're gonna do. And then we're gonna say my app in here, save it. And we refresh.

[00:03:21]
There we go, my app is showing up here. And now let's go to actually attach our app. And how do we do that? So what we're gonna do now is we're gonna open up the script block at the bottom. And we're actually going to go ahead and bring in a function from view called create app.

[00:03:35]
So I'm gonna create a constant and I'm gonna destructure it from Vue. So it's going to look like this. Now this is an alternative syntax basically just calling create app like this, calling the function directly. But there'll be an advantage of this from like a syntax perspective so that's why we're destructuring the function out.

[00:03:56]
And all we're gonna do is we're gonna go ahead and say const app equals create app. And so what that'll do is it'll create a variable called App, and then it'll go ahead and create setup. And all we're gonna do now is we're gonna mount because what we got to do, we got to tell view where it is we wanna actually put the app.

[00:04:17]
So that is where this mount keyword comes in. And we're gonna mount it to the ID of app which is using the CSS selector here that are mounted directly into this part. So in three lines of code, we have dropped the view or I guess four, include the CDN, we've loaded the onto the page and we basically created the app.

[00:04:39]
So if we refresh it, we'll notice nothing's really happening, and that's totally fine because we haven't had view display anything yet. And so when it comes to frameworks, one of the things that people love about working with frameworks is that it really helps attract your data across different states.

[00:04:54]
So that's called reactive data. So the fact that when something changes, it'll go ahead and make sure that your HTML page is updated as expected. So the way we're gonna do this is inside of our trade app, we're gonna pass it an object, and this object and allow us to configure things about our app.

[00:05:08]
So that's it, so think of it as a configuration object. And we're gonna do is we're gonna pass it a data option, and we're gonna do is this is gonna be a function, that returns an object. And so we think about what's going on here basically we're saying hey, Vue will want you to create an app that's gonna have a data property and the reason we're using a function here is because we want to actually basically maintain the reactivity in terms of like tracking the latest instance of that object.

[00:05:35]
Because if you were to do something instead like just data like this, the data becomes stale over time, and there becomes like caching issues, and so it is become kind of best practice across frameworks that when you are managing data, you actually have it be a function that returns an object and then the framework will take care of it from there for you.

[00:05:54]
And so in this, let us go and just add a message here. And this time, I will just say hello. It works.. Okay, so now here we have our reactive data message and the question is how are we going to actually render that inside of our app? Well, the way we're gonna do that is we're going to be using the curly brace syntax.

[00:06:13]
So this is specific to well actually this has been a fairly common syntax language. But as far as the three frameworks are concerned, this one Vue uses the double curly brace, and all we type is message. That's all it is. And when we refresh it, you'll notice your data is now appearing inside of your page as you would expect.