Hello, and welcome to the Vue fundamentals course with the Composition API. If you're here, that means you want to learn Vue. And I don't blame you. It's pretty sweet.
One thing you need to know before we start the course is this is a fundamentals course that's based on the Composition API. What does that mean? Well, there are two primary ways in which you can interact with Vue. that is, via the Options API, which was the way that Vue was written all the way through version two.
However, with the release of version three, a new API called the Composition API became available and revolutionized the way we interact with Vue and the way we write our Vue code. While the Options API still works in Vue three and is still relevant for a lot of cases, the future of Vue is really in the Composition API. So let's get started. The best way to start learning Vue as a beginner is to use the official Vue single file component playground, as you see on the screen here.
I've left a link to it in the description below. What do we have going on here? Well, first, you'll see online for that we've got a message defined as a reactive ref. Don't worry about what that really means right now.
We'll cover it in depth more later. Then down in the template, we have that message displayed in an h one tag. It uses what's known as the view templating syntax, or sometimes known as the double mustache syntax. Finally, you can see the result of this code over on the right-hand side.
That's cool and all, but one of the most exciting features of Vue is its reactivity system. In fact, I bet that's what you're here for. So let's see that in action. To do that, let's just start typing in the input below.
Whoa, isn't that awesome? As we type in the input, the heading automatically updates. This is possible because of the model. It provides two-way data binding for our reactive references.
And notice how short and sweet it is. Compare that to using vanilla JavaScript or even jQuery to do the same thing. Think of how much of a headache that would have been. We'd have to target both of the input and the H one elements.
We'd have to add an event listener to the input, and then we'd have to update the heading on every keystroke of the input. and that only takes care of the one-way data binding. With Vue, it's bound two ways. I keep saying that, two-way data binding, but what do I really mean?
To demonstrate, let me duplicate the input so that there are two of them. Now, if I type in one of the inputs, you'll see that the other one changes as well. That means whether we're getting or setting the value of message, everywhere it's being used, message will always stay in sync. How cool is that?
Now, this is really just a taste of the power that Vue provides us in such a simple and easy to use format. During this course, we'll explore everything Vue has to offer us while we build a shopping list app together. By the end of this course, you'll be ready to start using Vue in your own projects and tackle the other courses here at Vue School. Plus, you'll have the practical understanding you need to build a Vue app of your own.
So, what are we waiting for? Let's dive into our next lesson and see how fast, easy, and fun it is to work with Vue.