The Basics of Vue.js Directives

Vue.js directives are special tokens in the markup that tell the library to do something to a DOM element. They are prefixed with a v- to indicate that they are special attributes provided by Vue. Directives are one of the core features of Vue.js, allowing developers to manipulate the DOM efficiently.

In this article, we'll explore the basics of Vue.js directives, covering the most commonly used directives and how to use them in your Vue applications.

Commonly Used Directives in Vue.js

Here are some of the most commonly used directives in Vue.js:

v-bind: Dynamically binds one or more attributes or a component prop to an expression.
v-model: Creates two-way data binding on form input, textarea, and select elements.
v-if: Conditionally renders an element or component.
v-else: Provides an else block for v-if.
v-else-if: Provides an else-if block for v-if.
v-for: Renders a list of items using an array or object.
v-on: Attaches event listeners to elements.
v-show: Toggles the visibility of an element based on an expression.
v-html: Updates the inner HTML of an element.

v-bind: Binding Attributes Dynamically

The v-bind directive is used to dynamically bind attributes or properties to an expression. For example, you can bind an img element's src attribute to a data property:

<template>
  <img v-bind:src="imageSrc" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

The shorthand for v-bind is simply a colon (:), so the above example can be rewritten as:

<img :src="imageSrc" alt="Dynamic Image" />

v-model: Two-Way Data Binding

The v-model directive is used to create two-way data binding on form input elements. It keeps the input element and the data property in sync:

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-if, v-else-if, and v-else: Conditional Rendering

The v-if, v-else-if, and v-else directives are used for conditional rendering of elements. They allow you to conditionally render elements based on the evaluation of an expression:

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isGuest: true
    };
  }
};
</script>

v-for: List Rendering

The v-for directive is used to render a list of items by iterating over an array or object. Each item in the array can be rendered using a loop:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

v-on: Event Handling

The v-on directive is used to attach event listeners to DOM elements. You can handle user interactions such as clicks, input, and more:

<template>
  <button v-on:click="showAlert">Click Me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

The shorthand for v-on is the at symbol (@), so the above example can be rewritten as:

<button @click="showAlert">Click Me</button>

v-show: Toggle Visibility

The v-show directive is used to toggle the visibility of an element based on an expression. Unlike v-if, it does not remove the element from the DOM; it only toggles the display CSS property:

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: Rendering HTML

The v-html directive is used to update an element's inner HTML. It is useful when you need to render raw HTML in your Vue components:

<template>
  <div v-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

Conclusion

Vue.js directives provide powerful ways to manipulate the DOM and create dynamic and interactive web applications. Understanding the basics of Vue.js directives like v-bind, v-model, v-if, v-for, v-on, v-show, and v-html is essential for any Vue developer. By mastering these directives, you can build more robust and feature-rich applications with Vue.js.

vue directives v-bind v-model v-if v-for v-on v-show v-html reactivity data event conditional rendering