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

By default, the native JavaScript event object is passed as the first argument to the method that we define, unless we actively change this. Adding an event parameter to the method will thus give us access to this object, and we can output it to the console to see what it looks like. new Vue({… read more

So far we have seen how Vue.js reacts to changes in our data and updates the DOM accordingly, based on our template. But how can we react to DOM events, such as when a user clicks a button? Obviously we want users to be able to interact with our web application, and events are a… read more