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
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
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
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
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
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
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
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
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
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