Vue.js Directives: Enhancing Your Templates with Directives

Vue.js is a powerful JavaScript framework that offers a templating language that is a superset of HTML. In addition to interpolation, Vue.js provides a feature called directives that allows you to add special behavior to your HTML attributes. In this article, we will explore the various Vue directives and learn how to use them effectively in your Vue.js applications.

`v-text`: Simplify Text Interpolation

Instead of using interpolation, Vue.js provides the v-text directive to simplify the display of text data. By using the v-text directive, you can achieve the same result as interpolation:

1	<span v-text="name"></span>

`v-once`: Render Data Once

In Vue.js, data values are reactive, meaning they automatically update when the underlying data changes. However, if you want to render a value only once and prevent it from updating, you can use the v-once directive:

1	<span v-once>{{ name }}</span>

`v-html`: Render HTML Safely

By default, when you use interpolation to display a data property, Vue.js escapes the HTML to protect against cross-site scripting (XSS) attacks. However, in certain cases, you may want to render HTML dynamically. In such cases, you can use the v-html directive:

1	<span v-html="someHtml"></span>

`v-bind`: Bind Attributes and Properties

While interpolation works well for displaying data in the tag content, it cannot be used for setting attributes or properties. For that, you need to use the v-bind directive. Here’s an example:

1	<a v-bind:href="url">{{ linkText }}</a>

The v-bind directive is so commonly used that Vue.js provides a shorthand syntax using the colon (:):

1	<a :href="url">{{ linkText }}</a>

Two-Way Binding using `v-model`

The v-model directive is used for two-way data binding, allowing you to bind a form input element to a data property in Vue.js. Here’s an example of binding an input field and a select dropdown:

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

<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

Using Expressions

Vue directives support JavaScript expressions. This means you can use any valid JavaScript expression in a directive. For example:

1	<span v-text="'Hi, ' + name + '!'"></span>

1	<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>

Conditionals

Vue directives can also be used for conditionals in your templates. You can use the ternary operator in a directive to perform a conditional check. Here’s an example:

1	<span v-text="name === 'Flavio' ? 'Hi Flavio!' : 'Hi ' + name + '!'"></span>

Vue.js also provides dedicated directives for performing more organized conditionals, such as v-if, v-else, and v-else-if. Here’s an example of using v-if:

1	<p v-if="shouldShowThis">Hey!</p>

Loops

To render a list of items, you can use the v-for directive in Vue.js. You can iterate over an array of values or an array of objects. Here are examples of both scenarios:

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['car', 'bike', 'dog']
    };
  }
}
</script>

<template>
  <div>
    <ul>
      <li v-for="todo in todos">{{ todo.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, title: 'Do something' },
        { id: 2, title: 'Do something else' }
      ]
    };
  }
}
</script>

You can also retrieve the index of each item using the syntax (item, index) in items.

Events

Vue.js provides the v-on directive to handle DOM events and trigger methods in response. Here’s an example of using v-on to handle a click event:

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('test');
    }
  }
}
</script>

You can also pass parameters to the event handler like this:

<template>
  <a v-on:click="handleClick('test')">Click me!</a>
</template>

<script>
export default {
  methods: {
    handleClick(value) {
      alert(value);
    }
  }
}
</script>

Additionally, you can use inline JavaScript expressions directly in your template:

<template>
  <a v-on:click="counter = counter + 1">{{ counter }}</a>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  }
}
</script>

v-on is commonly used, so Vue.js provides a shorthand syntax using the @ symbol:

1 2	<a v-on:click="handleClick">Click me!</a> <a @click="handleClick">Click me!</a>

Show or Hide Elements

If you only want to show an element in the DOM when a particular property evaluates to true, you can use the v-show directive. It will render the element with the style display: none if the condition is not met:

1	<p v-show="isTrue">Something</p>

Event Directive Modifiers

Vue.js offers various event modifiers that can be used with the v-on directive to automatically modify the behavior of the event. One example is the .prevent modifier, which automatically calls the preventDefault() method on the event. Here’s an example of preventing the default form submission:

1	<form v-on:submit.prevent="formSubmitted"></form>

Vue.js provides other modifiers like .stop, .capture, .self, .once, and .passive. You can learn more about them in the official documentation.

Custom Directives

While Vue.js comes with a set of default directives that cover most use cases, you can also create your own custom directives if needed. If you’re interested in creating custom directives, you can learn more in the official Vue.js documentation.

Tags: Vue.js, Vue.js Directives, v-text, v-once, v-html, v-bind, v-model, v-if, v-for, v-on, v-show, event directives, custom directives