Using lifecycle hooks

Keyboard Shortcuts

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 stepsas it is created and used, these are called lifecyclesand 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 hookand there's a lot of them in Vue.js,you can see some of them right here,these are perfect for performing AJAX operationsand other HTTP requests,so that we can load content at a certain point,therefore becoming available to our applicationat that point in the lifecycle.

In our case, we're going to want to use the created methodto 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 withthe replacement of the HTML element,that our application is going to take after,so we're going to use this one right here called createdand it happens after the Vue object is initializedand all the other events happen,but before we have used the el propertyto get to our HTML.

There are some other lifecycle methodsand you can get more information about them at this URL.So we want to move this data, that's in our applicationaway from this variable and use the createdlifecycle 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 hereand cut it out of thereand then I'm going to also get rid of this variableand before we put this in a separate file,I'm going to go to this websiteand I'm going to paste this into this section right here,because one of the things that this JSON Editor Onlineallows you to do is to reformat that dataand I'll click on this button right hereand it shows it to you in a slightly better way,you can also hit this button right hereand it will bring that information to the right,where you can see the different pieces of datain a little bit easier sort of format,so once I have that, I'll just copy all this informationand then I'll go back into my applicationand 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.jsonand then I'm going to paste all that data in there,just leave it as the array, but save thatand we'll go ahead and close this document out.

So we're going to add a created propertyinto our export default method right here,so I'll put that after this data methodor property right here, so I need to put a commaright after this curly braceand then I will say createdand then this is going to be a method,so I use a anonymous function hereand then since I'm using jQuery,I can use the getJSON methodand I'm going to load this file from the builds folderand I called it appointments.json,so if you remember from the previous movie,we have something called Webpack installed in this projectand it's going to take care of puttingthis appointments.json file into a builds folder,once we build the application,now it's also going to take careof allowing us to work with this file,when we are in development mode, so we don't have to worrythat although we placed this file inside assets,we're actually asking for it in the builds folder,we'll use the promise method called doneand once we get that, we're going to read this datainto a variable called infoand 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 changethis variable that's just right now called appointmentsto 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 itselfand because the appointment is a proxyto 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 arrayand then we're using the jQuery getJSON methodto load the appointments from our fileinto 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 fileand 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 hereand go into our assets folderand 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 tasksat different points in the application's lifecycle,it's very handy for things like AJAX requests,as well as HTTP verbs.

Resume Transcript Auto-Scroll

Author

Released

10/11/2017

The perfect way to learn Vue.js is to use Vue.js. It's an incremental library that can scale to fit almost any developer's needs. Once you build an application interface and see its strengths and flexibility in action, you can decide how much of Vue.js you want to use in your own projects. This hands-on course teaches you how to build a simple component-based app: a rating system with features like search and sorting. Along the way, Ray Villalobos shows how to use Vue.js lifecycle methods to load data from files or an API; leverage HTML templates; work with nested subcomponents; add, edit, and delete records throughout the interface; and build layouts to search records and sort the displayed results. By the end of the course, you'll have a functional app prototype and more skills with this flexible framework.