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

Throughout this series, we have seen how we can access data properties, methods, computed properties and watchers directly without any prefix. Now it’s finally time to take a look at what happens behind the scenes in a little more detail. I have prepared a small example with a Vue instance containing a couple of data… read more

We have created a lot of Vue instances in this course so far, but did you ever wonder if you could use multiple Vue instances on the same page? Indeed you can, as you can probably tell based on the below example. <div id="vm1"> <h1>{{ name }}</h1> </div> <div id="vm2"> <button @click="showName">Show name</button> </div> var… read more

Until now, we have done all of our work within the Vue instances themselves. But we can also reference these Vue instances by storing them in variables. I have prepared a super simple example which just displays a data property. <div id="vm1"> <h1>{{ name }}</h1> </div> new Vue({ el: '#vm1', data: { name: 'Vue Instance… read more