We just took a closer look at a Vue instance’s lifecycle, including which hooks we have at our disposal. In this post, I want to show you how to actually use these lifecycle hooks for running custom code at certain stages of a Vue instance’s lifecycle. Below is a simple Vue instance with all of… read more

In the last couple of posts, you have actually seen a few examples of parts of the Vue instance lifecycle. I didn’t mention it at the time, but let’s now see how some of the things we learned fit into the bigger picture. Each time we create a Vue instance, there are a series of… read more

In this short post, I want to show you how you can destroy a Vue instance. Usually you won’t need to do this yourself, though. When we get into talking about components, we will see that it is better to control the lifecycle of child components by using directives such as the v-if directive. That’s… read more

Now that we have seen how to dynamically mount Vue instances to HTML elements, let’s see how we can use inline templates. Until now, we have always added all of our HTML markup within the HTML section on JSFiddle. But you can, however, also add a Vue instance’s template within the instance itself by using… read more

Until now, we have always used the el property within our Vue instances to specify which HTML element our Vue instance should control. Or, more formally, which element the Vue instance should be mounted to. This means that we have to know which element the Vue instance should be mounted to when we declare the… read more

It’s time to take a closer look at a few more special Vue instance properties and methods, with the first one being the $refs property. But before diving into the JavaScript part of things, let’s start by taking a look at the template. <div id=”app”> <h1>{{ message }}</h1> <button @click=”clickedButton”>Click Me!</button> </div> var vm =… read more

In this post, I want to show you how to add watchers dynamically, i.e. “outside” of the Vue instance. If you have assigned a Vue instance to a variable as we have here, then there is a $watch instance method available on this variable. This method let’s you add a watcher, so let’s go ahead… read more

Now that we have covered how Vue proxies and reacts to data, let’s take a short moment to talk about something called “the virtual DOM.” This sounds super fancy and perhaps slightly intimidating, but don’t worry! It’s not really a requirement to know what the virtual DOM is when working with Vue.js, but it’s always… read more

We just saw how Vue.js reacts to any changes that we make to our data properties and updates the DOM accordingly. This is great, but there’s something I didn’t tell you. It actually does this asynchronously. So even though it looks instant whenever we change a data property, this is actually not the case. What… read more

Alright, so now that we know how Vue.js proxies data and methods for us, let’s talk a bit about how it reacts to changes. We are going to use the example from the previous post, because we’ll be spending most of our time within the browser’s console again. <div id="app"> <h1>{{ message }}</h1> </div> var… read more