js is remarkably easy to start using. The easiest way to get started is to include Vue in a regular old HTML file using its CDN. Just like that, we've added Vue to our site. Now, let's create a div with the ID of ShoppingList where our Vue app will live.
Inside, we can add an H1 saying, hello, Vue. Right now, we haven't done anything with Vue, so let's start using it. createApp() to create our view instance. For now, I'll also just pass an empty config object.
Next, we'll need to tell the view instance where it should exist on the page. This is where the div that we added earlier comes into play. We'll tell our view instance to mount to the shopping list ID we added earlier. Nice!
Now view is instantiated. and we're ready to start using it. Let's display some view data to the page. First, we'll add a data method to our config object.
Then we'll return an object with a header property set to view is ready to party. The object that data returns is where we can store data for our view instances to use. Don't worry too much about it now. We'll cover it in depth later.
Let's get our header onto the page using Vue's templating syntax, or oftentimes known as the double mustache syntax. All right, our header is now on the page. One of the most exciting features of Vue is its reactivity system. In fact, I bet that's probably what you're here for, so let's go take a look.
We can create an input field and use Vue's vmodel directive to bind our header to the input. This ensures that the text and the input stays in sync with the header at all times. So when we change the input's value, we'll see that our H1's content changes instantly. Isn't that incredible?
It was so quick and very easy to get going. Just imagine how tricky that would have been using vanilla JavaScript or even jQuery. We would have had to set up an event listener on the input, then update the heading every time the user typed something. And that only takes care of the one-way data binding.
With Vue, the data is bound both ways. header directly, we would see that it would update on the screen, too. To see that in action, let's assign our Vue instance to a variable, and then we'll use it in our console. Whoa!
How cool is that? This is just a taste of the power that Vue provides us in such a simple, 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 very own. So, what are we waiting for? Let's dive into our next lesson and see just how fast, easy, and fun it is to work with Vue. js is remarkably easy to start using.
The easiest way to get started is to include Vue in a regular old HTML file using its CDN. Just like that, we've added Vue to our site. Now, let's create a div with the ID of ShoppingList where our Vue app will live. Inside, we can add an H1 saying, hello, Vue.
Right now, we haven't done anything with Vue, so let's start using it. createApp() to create our view instance. For now, I'll also just pass an empty config object. Next, we'll need to tell the view instance where it should exist on the page.
This is where the div that we added earlier comes into play. We'll tell our view instance to mount to the shopping list ID we added earlier. Nice! Now view is instantiated.
and we're ready to start using it. Let's display some view data to the page. First, we'll add a data method to our config object. Then we'll return an object with a header property set to view is ready to party.
The object that data returns is where we can store data for our view instances to use. Don't worry too much about it now. We'll cover it in depth later. Let's get our header onto the page using Vue's templating syntax, or oftentimes known as the double mustache syntax.
All right, our header is now on the page. One of the most exciting features of Vue is its reactivity system. In fact, I bet that's probably what you're here for, so let's go take a look. We can create an input field and use Vue's vmodel directive to bind our header to the input.
This ensures that the text and the input stays in sync with the header at all times. So when we change the input's value, we'll see that our H1's content changes instantly. Isn't that incredible? It was so quick and very easy to get going.
Just imagine how tricky that would have been using vanilla JavaScript or even jQuery. We would have had to set up an event listener on the input, then update the heading every time the user typed something. And that only takes care of the one-way data binding. With Vue, the data is bound both ways.
header directly, we would see that it would update on the screen, too. To see that in action, let's assign our Vue instance to a variable, and then we'll use it in our console. Whoa! How cool is that?
This is just a taste of the power that Vue provides us in such a simple, 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 very own.
So, what are we waiting for? Let's dive into our next lesson and see just how fast, easy, and fun it is to work with Vue.