In this post, we will be taking a look at looping through arrays, both with simple values and objects. We will be looping through the data properties that I have already added to the Vue instance; one is an array of strings representing movie titles, and the other is an array of objects, representing employees.… read more

Since we’re on the subject of showing and hiding elements, let’s see how we can hide the string interpolation syntax that appears on the page until Vue.js is bootstrapped. Since the string interpolation syntax is simply a part of the HTML as normal text, the browser will render it as such. It will then be… read more

Until now, our templates haven’t supported dynamically rendering elements based on boolean conditions. That’s about to change, as we will talk about three directives in this lecture; v-if, v-else-if, and v-else. The names of these directives should pretty self-explanatory, so let’s dive straight into an example. Suppose that we have a webshop and we want… read more

If you – for whatever reason – want to only output something one time, then you can use the v-once directive. This directive ensures that an element is only rendered once, and when Vue.js re-renders the page, the element and all of its children will be considered as static content and thereby skipped. An example… read more

So far we have seen how we can use string interpolation to output data. When doing so, Vue.js actually takes some security precautions on our behalf by escaping the data. Before talking about how Vue.js escapes data, let’s first talk a bit about why this is the case. Suppose that users on a website can… read more

We just saw how we could update a data property’s value with the v-on directive and the keyup event. We did this both using a method as our event handler, and by embedding a JavaScript expression directly into our template. Not only was this code specifically handling text input fields, and would therefore not handle… read more

I hope that you won’t get too confused when I tell you that not only is there something called key modifiers in Vue.js, but there is also something called modifier keys. Modifier keys refer to keys such as control, shift, alt and the Windows or Command key on Mac. With modifier keys, we can trigger… read more

In the previous post, we took a look at event modifiers. In this post, we will be looking at a more specialized category of event modifiers, namely so-called key modifiers. As the name suggests, this category of event modifiers can be used with keyboard events. Say that we have a text input, for example, and… read more

Directive modifiers are special postfixes that are denoted by a dot, indicating that a directive should be bound in some special way. The modifiers that are related to events are referred to as event modifiers. Yeah, I know what you are probably thinking. That sounds fancy and all, but what does it actually mean? While… read more