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
In this post we’ll be talking about something called filters. Filters provide a way to perform text transformation such as capitalizing letters or doing virtually anything we’d like. Filters can be used both within string interpolation, but also within the v-bind directive’s expression. As always, let’s dive straight into an example. I have a message… read more
Sometimes you may want to watch data for changes and react to them. Typically all you need is computed properties, but there are some scenarios where you need to implement a custom watcher. Before we talk more about when to use watchers, let’s first see an example of how to use them. We will build… read more
In the previous post we saw how and when to use computed properties. In this post, I want to show you how to use getters and setters with computed properties. Computed properties are getter-only by default, but if you need to, you can also specify a setter. To do this, we actually need to change… read more
Let’s take a short break from talking about directives and turn our attention to something calling computed properties. Computed properties are kind of similar to methods, but bring something powerful to the table: caching! Let’s dive into an example, and I will tell you what you need to know as we go along. I have… read more