Now, we can actually do this a couple ways, but let's start with the simplest approach. I'll pull it in through a CDN. I'll use a service called unpkg.com, and I want Vue, specifically version 3. And if you want to make sure you got that right, just copy the URL and paste it into your browser. So if we run that, sure enough, I have the source code for Vue 3.2.33. Okay, next let's initialize Vue. We can do that by calling Vue.createApp. I'll feed it an empty object for now. And then I want to mount it to an HTML element. Usually we call this app, but you don't have to.

And then I want to mount it to an HTML element. Usually we call this app, but you don't have to. It doesn't matter. I'll pass a selector here. Okay, so in fact, this would work. It doesn't do anything. It's a blank page, but we are successfully initializing Vue and mounting it to the page. So what we've done here is basically said Vue has access to this element and its children, but nothing else. So if I have a header here, Vue won't know anything about this because it's outside of app. Okay, so let's make it a little more fun.

So if I have a header here, Vue won't know anything about this because it's outside of app. Okay, so let's make it a little more fun. For a lesson one exercise, let's do the typical hello world. So I will have a greeting, and I'm going to use this mustache syntax here. Think of this as our way of saying echo out the value associated with the data property greeting. But I don't have a greeting. Let's do that now. Within our object here for our application, I'll add a method called data, and that will return an object. We'll set greeting to hello world. Now, you can think of this object as the single source of truth for the application.

We'll set greeting to hello world. Now, you can think of this object as the single source of truth for the application. It's a really common phrase, but if that's confusing, well, in the past, the DOM itself was often the single source of truth. So I mean in the early 2000s, you were using jQuery. You would write a query. You'd dive into the DOM. You'd pull out an h1. You'd grab its text content, and then you would manipulate it. That's what I mean when I say the DOM itself was the source of truth. That's very different from what we see now where a clean JavaScript object like this is actually the source of truth.

All right, and it works. We get hello world. So again, it's not the most exciting thing, but on the other hand, this is pretty cool. So let's take it a little further. What if I also want to show you the number of characters in the greeting just as an exercise? Okay, something like this. I want to see dynamically the number of characters in the greeting. All right, well, once again, we'll use this mustache syntax, and I'll call greeting.length. This is basic JavaScript. So if we come back and refresh, I still get 11, but now we are determining this number dynamically,

re-render the page to reflect the changes. It's really cool, and it happens behind the scenes without you even needing to know what's going on. I'll give you an example of this. Here's a method on your component called mounted. This will fire automatically by Vue when the component mounts to the page. And this will be almost immediate. Refresh, and I get my alert. So let's do this. Let's set a timeout. And we're going to say, how about after three seconds, update the value of greeting.

Let's set a timeout. And we're going to say, how about after three seconds, update the value of greeting. All right. This.greeting equals changed. Okay. Now watch. One, two, three, and it changes. So that's what I mean. We updated the greeting after three seconds, and Vue, because of reactivity, picked up on that change, and it determined, oh, I need to re-render the DOM.