You can create an entire app with Vue.js in a single file. This video shows how to create an app this way to get you started.
= [Instructor] So let's get things going by working with a basic single file Vue.js project. Now, you can create an entire application in a single file, and although that's not the best option for larger apps, it's a great way to get a feel for how Vue.js works. Like with any other framework, you start by loading up the library. You can download the file, but Vue.js provides a copy of the code at this URL. All you have to do is use a script tag to include this into your page, and once you do that, you'll have access to the Vue constructor, which gives you an object to access all of the features of the framework.
You'll need to use this Vue constructor in order to create an instance, and you pass along a configuration object, and this object will define different properties and methods for the application. So let's take a look at some code really quick. This is the basic script that you would put into your application, and as you can see right here, we're creating a variable that's going to hold our Vue constructor. So with this new Vue command here, we're creating an instance of this Vue element, which has all the features of Vue.js.
Now, this VM right here could be called anything, but it's customary to call it VM for Vue Model, which is the approach that Vue.js uses, and the Vue in the approach means that it focuses on the display of information, and the model is essentially the data. Now, there's a lot of properties that you can add here. For example, we have this el as well as this data property that are a part of this declaration. You can also have other things like a template, methods, watched variables, life cycle callbacks, and a lot more, and we're going to get into those in this course.
Now, a common element that you'll see is called el, which stands for elements. Applications usually replace an element on your HTML, and this property identifies what that element is. But it looks like how we would target CSS, and in this case we're looking for an HTML element with an ID of app. The next element is the data property. Now, this element creates copies or proxies of variables that you can use in templates.
Changes to these variables are what is called reactive, which means that if the information in those variables change, Vue will check to see if the DOM needs to be updated because of these changes. And it does that automatically for you. That's one of the cool things about this framework. Now, here's what a template looks like, and you need this to create the element that's going to hold the application. In our case, we are targeting an ID of app in our configuration, so we have to add that element right here.
And you can then use the data proxies, the variables that you created, and send them to your apps. For example, we created a title variable, and so we can ask for the value of that title variable when we put it on this h1. Now, Vue has a very rich templating language, so in addition to just displaying the variables in our data, there's lots of things like events, if-then statements, loops, and much more. So let's get started by creating a very simple project.
Here we have a super simple HTML page, and all we need to do is add a script tag right here, and for the source, we're going to use that link to the Vue code that I showed you earlier. So https://unpkg.com/vue. So this is going to load the Vue library. And you would do this if you wanted to load some other thing like Bootstrap or any other framework.
Then after that, in the body section, we want to create a div that's going to hold our application. So this'll just be a div, and we'll give it an ID of app. And here is where we would use the variables that we'll create in our data section. So I know I'm going to create a headline level one and I'm going to use these double curly braces here to pass along a variable that I'm going to create in a minute called title. So let's go down and over here, we'll create a script, and this is where we can start programming with Vue.js.
So what I'll do here is create my Vue model, and that will be a new instance of the Vue constructor, and then I'll need to pass it a configuration object right here. That configuration object usually has at least the name of the element that we're targeting, so in that case that element was called app, and it was actually an element with an ID of app, so we'll need to use this hashtag right here.
And then we want to pass along some data. In this case, we'll make it really simple. This data will be another object, and it's always nice to use comments. And in this data, we'll just set up a title parameter here, and we'll use the value Appointment, 'cuz that will be what we want to appear in this headline level one. So let's go ahead and save that, and if we refresh, you should see the data right here in the application. When working with Vue.js, you'll probably want to install the Vue.js developer tools.
You can find them at this URL. Now, if you've installed the Chrome developer tools, you should see a little icon right here, and that means that we can inspect the page and switch over to this Vue element right here. You can see that there's now a root object, and in this root object we can see our data has that element called title, so that's pretty cool. Let's go ahead and add something a little bit more complicated. So for that, I'm going to go to a special Gist that I created for you, and I'm going to hit this raw button and just copy all that data.
So this is an array of elements, and it has a bunch of information for different appointments. You can see that each appointment has the pet name, the pet owner, an appointment date, as well as some notes. So we'll grab that. And what I'll do is I'll just create a variable to hold this data. I'm going to call it apts. And then just paste all that stuff in there. So now we have a variable that we can use. And in addition to creating this proxy for this title, we can create another one for our appointments, and I'm going to set that to that variable with all of our data that we called apts.
So now if we want to actually push that into our template, then all we have to do is create another element with a new directive. And as I mentioned, Vue.js has a ton of directives. One of the most common ones, and this is used for iterating through array elements, is called v-for. Now, most of the directives will start with that v, and some of them have shortcuts, but v-for will work. And we'll say, okay, we want a certain item in our appointments.
So just like we called this title, we can actually call the appointments proxy, which is this data right here. And then it's going to loop through each one of those elements, so each one of those elements is going to output a list item, and in that list item, I can just output something. So with my double curly braces, then I can just use the variable called item. So this variable called item is temporary and it's created from each of the elements in our list or our array.
So we can use that element to say item.petName, and let's go ahead and save that, and we'll have to refresh. So it looks like in my console, I have an error, so I can go here to the console and take a look at what it's telling me. This is one way to catch errors. So it looks like somewhere on this page, I have an error, and it says unexpected token. And that reminds me that this data is an object, and objects don't end with semicolons.
Let's go ahead and save that, and we'll need to refresh over here. And now you can see that all the appointments appeared, and it was very easy. We didn't have to target the unordered list in the DOM and send all the data to the DOM. Vue.js was able to do that for us automatically. As you can see, with just a few simple commands, we were able to load the Vue.js framework and then use our configuration object and its constructor to create an application where we used a template to display some data.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering