In Vue.js, like in many other frameworks, an application goes through a series of steps as it is created. These are called life cycles and Vue allows you perform different actions throughout this life cycle.
- [Tutor] In Vue.js, like in many other frameworks, an application goes through a series of steps as it is created and used, these are called lifecycles and Vue.js allows you to perform different actions, as it goes through its lifecycle methods. Now to get into these different lifecycle positions, we need to use something called a lifecycle hook and there's a lot of them in Vue.js, you can see some of them right here, these are perfect for performing AJAX operations and other HTTP requests, so that we can load content at a certain point, therefore becoming available to our application at that point in the lifecycle.
In our case, we're going to want to use the created method to import our data file into our project, this way we can ask a server for our data, after the application has been initialized, but before we start dealing with the replacement of the HTML element, that our application is going to take after, so we're going to use this one right here called created and it happens after the Vue object is initialized and all the other events happen, but before we have used the el property to get to our HTML.
There are some other lifecycle methods and you can get more information about them at this URL. So we want to move this data, that's in our application away from this variable and use the created lifecycle hook in the app to bring this in, so I'm going to start out by grabbing all this data, I'm just going to grab this array part right here and cut it out of there and then I'm going to also get rid of this variable and before we put this in a separate file, I'm going to go to this website and I'm going to paste this into this section right here, because one of the things that this JSON Editor Online allows you to do is to reformat that data and I'll click on this button right here and it shows it to you in a slightly better way, you can also hit this button right here and it will bring that information to the right, where you can see the different pieces of data in a little bit easier sort of format, so once I have that, I'll just copy all this information and then I'll go back into my application and I'm going to create this file in the assets folder, let's go ahead and create a new file, I'll call it appointments.json and then I'm going to paste all that data in there, just leave it as the array, but save that and we'll go ahead and close this document out.
So we're going to add a created property into our export default method right here, so I'll put that after this data method or property right here, so I need to put a comma right after this curly brace and then I will say created and then this is going to be a method, so I use a anonymous function here and then since I'm using jQuery, I can use the getJSON method and I'm going to load this file from the builds folder and I called it appointments.json, so if you remember from the previous movie, we have something called Webpack installed in this project and it's going to take care of putting this appointments.json file into a builds folder, once we build the application, now it's also going to take care of allowing us to work with this file, when we are in development mode, so we don't have to worry that although we placed this file inside assets, we're actually asking for it in the builds folder, we'll use the promise method called done and once we get that, we're going to read this data into a variable called info and then go ahead and tighten up the space right here, once that information is read, then it's going to go into a variable, that we're going to call theAppointments, so that means that we're going to need to change this variable that's just right now called appointments to this new variable called theAppointments, so this is how we refer to a variable inside this data, we call it using the this keyword, in this context, this is going to refer to the application itself and because the appointment is a proxy to the data in my application, I can just call it from there.
Now instead of referring to the apps variable, that we deleted, we're going to make this an empty array, so whenever this application loads, theAppointments is going to initialize to an empty array and then we're using the jQuery getJSON method to load the appointments from our file into this variable right here, let's go ahead and fix the space a little bit there. We also need to update this variable, that we're just calling appointments to theAppointments.
Now, I'll just note that if you are not using a local file, then you can just type in an HTTP address right here, so if you're using a public API, you could just type the URL to it right here, but we're going to be using a local file and that means that because of the way Webpack is set up, we're going to need to import that file into our application, so let's go ahead and save this and go into main.js, notice that it's not importing anything right now, we're going to add an import statement here and go into our assets folder and load up the appointments.json file.
Now notice that all the information came back, if you're just loading something to an HTTP URL, you don't need to do this step. So lifecycles method allows us to do different tasks at different points in the application's lifecycle, it's very handy for things like AJAX requests, as well as HTTP verbs.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering