This course has been updated! We now recommend you take the Introduction to Vue 3 course.

Check out a free preview of the full Introduction to Vue.js course:
The "Vue Instance" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

With a "Hello World!" example, Sarah demonstrates the basics of utilizing Vue.js framework.

Get Unlimited Access Now

Transcript from the "Vue Instance" Lesson

>> Sarah Drasner: All right, the first thing we're gonna talk about is directives and data rendering. If you come from an Angular background, a lot of this stuff will be review for you. And especially if you've worked with some of the previous frameworks that people were talking about earlier today, a lot of this stuff will look familiar to you because Vue borrows from a lot of those other areas.

[00:00:21] But the directives are super powerful and so we gonna start there and we're also gonna talk a little bit about Mustache template and using data in a Vue Instance. So just in case somebody skipped over the introduction because I skipped the introduction sometimes here is the [LAUGH] GitHub Repo again, the Vue DevTool and the Codepen collection.

[00:00:43] All right, let's do an intro and the Vue Instance. We're gonna do a much longer deep dive into the Vue Instance a little bit later on. But for now, what I'd love for you to see here is that, in order to create this pen, what we have here is div id app.

[00:01:01] And then we have mustache templates that say text, nice to meet Vue. And then we've got in our JavaScript tab here, new Vue and the element that we're using is app, which establishes a relationship with this div id = app. You can call that whatever you want, like I could call it like robotface here, and then robotface over here, and that would still work.

[00:01:32] All the styling fell off of it, but you kinda get the picture. Then, we have this data object. That data object is what we're using in the Vue Instance to manage the state of the application. So things that we need to adjust, part of the reactivity system which we're gonna delve into later on.

[00:01:51] But really all you need to know for now is that this text establishes a relationship in the HTML outputted through this mustache template tags and that string will then be outputted there as well. So it establishes a relationship between this mustache tags and that hello world and that's really all you need in order to, To get going.

[00:02:16] If you wanted to just use Vue in an HTML application, you could. You have a lot of strength when you use a whole build process. But for the first part of this, I'm gonna show you how we're gonna use it in HTML, CSS, and JavaScript without doing a build process.

[00:02:31] Because sometimes you wanna incrementally adopt the framework before you like sell yourself on the farm. And, yes, go ahead.
>> Speaker 2: Just a quick question where you're assigning the element, I'm assuming that can be any CSS type selector?
>> Sarah Drasner: Yes, it can, absolutely. I typically use IDs because you only want one instance of that but it can be anything that you like.

[00:02:51] So sometimes we incrementally adopt frameworks, especially because not many of us are just starting a website from scratch, right? So if you need to do that, you can do that with Vue. One more thing I wanted to show you in this example. So if we have this Hello World and I opened it in the debug window.

[00:03:13] I can go over to my Vue Inspector, and then click on this Root, and see that text over here. So if I'm looking at it in the Vue DevTools, what I will see, instead of seeing all of the elements like you see over here. That's like all of that outputted elements and bill elements for the page.

[00:03:32] We have in the Vue DevTools exactly what's going on, so that root is that Vue Instance itself and we see that text in the Hello World.
>> Speaker 2: This is so cool.