VueJS - Directives

Introduction to VueJS Directives

VueJS directives are special tokens in the markup that tell the library to do something to a DOM element. This guide introduces the most commonly used VueJS directives and demonstrates their usage in building dynamic web applications.

Common Directives

v-bind

The v-bind directive dynamically binds one or more attributes, or a component prop, to an expression:

v-model

The v-model directive creates a two-way binding on form input, textarea, and select elements:

  
  
{{ message }}




                

v-if

The v-if directive conditionally renders an element based on the truthiness of an expression:

  
This text is visible




                

v-for

The v-for directive renders a list of items by iterating over an array:

  

    
{{ item.text }}
  




                

v-on

The v-on directive is used to listen to DOM events and execute methods:

  Click me




                

Modifiers

Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way:

.prevent

The .prevent modifier is used to call event.preventDefault() on the triggered event:

  

    Submit
  




                

.stop

The .stop modifier is used to call event.stopPropagation() on the triggered event:

  Click me




                

Custom Directives

VueJS allows you to register custom directives. Custom directives are especially useful for abstracting reusable DOM manipulations:

// Register a global custom directive called 'v-focus'
Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});



  




                

Best Practices

Follow these best practices when using VueJS directives:

• Keep Directives Simple: Keep the logic within directives simple and focused on DOM manipulation.
• Use Built-in Directives: Prefer built-in directives whenever possible before creating custom ones.
• Document Custom Directives: Document your custom directives to make them easier to understand and maintain.
• Avoid Overusing Directives: Avoid using too many directives on a single element to keep your templates clean and readable.
• Leverage Modifiers: Use modifiers to extend the functionality of directives without adding extra logic.

Summary

This guide provided an introduction to VueJS directives, including common directives like v-bind, v-model, v-if, v-for, and v-on. It also covered modifiers and custom directives. By understanding and utilizing these features, you can create dynamic and interactive user interfaces with VueJS.