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
I’m sure you noticed by now that we use the v-on and v-bind directives quite a lot in Vue.js. Wouldn’t it be nice if we didn’t have to type that out explicitly every time? Fortunately Vue.js provides shorthand syntaxes for these two directives. Let’s use a button with a click event listener as an example.… read more
Now that we have seen how to add inline styles by binding to the style attribute, let’s now see how to use classes for styling. While it is convenient and sometimes necessary to use the style attribute, it is considered best practice to write CSS in external stylesheets and apply styles to elements based on… read more
So far we have seen quite quite a few examples, but let’s be honest, they haven’t been that visually appealing. In the next couple of lectures, we are going to see how we can apply styling to our elements and make things just a bit more interesting. We are first going to start out by… read more