a computer screen in a darkened room with a coffee cup in front of the screen

Vue | Directives

In the most simple words, directives are basically built-in commands, of sort, that have some magic logic behind them to make them do special things ?

What do Vue directives look like?

When you’re looking trough a bunch of HTML lines, directives could be easily identified as they all start with ‘v-something‘. Unless it’s a short-hand situation – when you’ll be looking for the colon ‘:‘ or an ‘@’ symbol.

This ‘something’ we have added in will change depending on what do we want to do, so I’ll write up some examples and try sum up what do they do.

Conditional Rendering | v-if

Imagine we wanted to display something but only if some condition was met, if it hasn’t been met – don’t display it. We’d do this sort of thing with a v-if=”” directive. Within quotation marks we set the condition we want to check for. But what if there are more than one condition to meet?

We add more checks using v-else-if=””and v-else=”” which can help us manipulate the way we’re displaying what we wanted.

Let’s see it used in a simple example:

<div v-if="pageIsPublic">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>

In this example, only if our condition runs true we’ll be able to see page Title and Paragraphs. If we wanted to set more rules for our conditions, we’d add in an ‘else block’ or an ‘else if block’ to our code.

Keep in mind:

v-else element must immediately follow a v-if or a v-else-if element – otherwise it will not be recognized.

There is, however, another option we could use to conditionally display something we wanted and it’s called v-show. With this directive, the element is always rendered to the page regardless of conditions we have set previously. Keep in mind, it will only be shown to the user if the condition runs true.

This is similar logic to that we’ve seen with CSS visibility property, if we set visibility to visible, it will be visually there. If we set visibility to hidden, we won’t see it on the page, but it won’t be hidden when you look with inspector.

In some cases this directive might be useful, but it’s overuse means you’re rendering things that you might not need and it would be much better to use v-if instead as this way we’re not rendering unused/hidden elements unless our condition comes back as true.

Keep in mind:

Note that v-show doesn’t support the <template> element, nor does it work with v-else.

List Rendering | v-for

This time we’re going to try and display a list of items that belong to an array. To do that we need to use v-for directive. This one is a little bit special because it requires us to set a key. And it has a bit of a different syntax. Let’s see what it does:

<ul id="myListOfItems">
  <li v-for="item in items" v-bind:key="item.message">
    {{ item.message }}

On the first line we’ve set up a list and gave it an id. On the second line where we’re displaying a list item we’ve got some weird looking things ?

*If this looks weird here is the most simplified crash course on loops:

These weird looking things will be called ‘for loops’. The word ‘item’ you see up there, is a made up word and it can be any word you want it to be. For your own benefit you should keep a name that makes sense. While the second word ‘items’ is the name of our array, which holds all data we wanted to display.

When we translate this to ‘human’ it means that we want something to happen for each single item in our array(group) of items. Makes sense? ?

Second part of the same line is something new and you’ve probably already flagged it as a new directive ?

Class and Style Bindings | v-bind

Vue developers have been blessed with a directive which allows them to easily ‘add’ classes, styles, URLs and other things to the element of choice inline. You can even set conditions! ?

What does ‘bind’ mean? It sort of means to connect two things, I guess ?

v-bind directive is a bit different to others, in the terms of syntax.
This is how it looks in its full form:

<a v-bind:href="google.com"> ... </a>

<a v-bind:class="{'active' : isActive }"> ... </a>

<a v-bind:style="{color: #344179}"> ... </a>

We can also use shorthand which removes the whole ‘v-bind’ bit and just leaves us with :something. If we wanted to use shorthand on the same example it’d look like this:

// adding a link to google
<a :href="google.com"> ... </a>

// adding 'active' class if isActive method runs true
<a :class="{'active' : isActive }"> ... </a>

// adding colour blue to text between our <a> tags
<a :style="{color: #344179}"> ... </a>

Two way data binding on form input fileds | v-model

If we needed to listen for events and update values between a parent and a child component – we’d need two way data binding.

This can be done with v-model directive, which can be used on form input, textarea and select elements.

Let’s see how would that look like in another simple example:

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

On our regular html ‘input field’ we add v-model with this word ‘message’ as a value. We also see a placeholder prompting a user to edit the field.

Next thing, there is a paragraph which used the very same ‘message‘ but within curly braces, so that we can ‘express’ it as text value.

What does it all mean? ?

Whatever the user types into our input filed will appear in our paragraph, whenever they change what they wrote – our paragraph will change too.

There is one more directive I want to tell you about. On top of this section about v-model we talked about ‘listening for events‘ so lets see a directive that helps us with events and clicks and all them things, shall we? ?

Event Handling | v-on:click

Our click-to-action buttons will become such a joy to work with after you’ve tried v-on:click or shorthand @click.

When I first saw shorthand example, the syntax bothered me a bit to be perfectly honest, as ‘@’ symbol means ‘at’ and not ‘on’ but here we all are ?

This directive listens to DOM events and runs a method of your choice when user clicks on a button and this is how it looks like if we wanted a simple example:

<div id="exampleContainer">
  <!-- `greet` is the name of a method defined below -->
  <button v-on:click="greet">Greet</button>

In this example, if a user clicks on our button a method called ‘greet’ is ran and we’re expecting to see something happen. This ‘something to happen’ will be defined inside of your method and it can be anything you wish.

Sometimes you’ll want to change the default behaviour of your button, in those situations you’re encouraged to chain .stop .prevent .capture .self .once .passive and any other event modifiers to your v-on:click directives.

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

Are there any more directives?

Vue gives us so many tools and shiny new toys. Hopefully this article introduced you to some commonly used vue directives, differences between some of them and clarified when to use which one. To help you further I will link a vue essentials cheat sheet as well.

There is a lot more to talk about and I’m sure even more will be added in soon. For now this is where we’ll stop and try remember all the new things we’ve just gone trough.

When you’re ready for more visit the newest blog post focusing on Vue Components & Props. And if you’re very new to Vue I’d recommend checking out my article on Getting Started with Vue.

I’m REALLY interested in how’s your Vue learning going so far so please make sure to let me know your thoughts and show off your recent projects over on Instagram or my contact page ?

Leave a Reply