Vue.js Custom Directives

What are custom directives in Vue.js?

Custom directives in Vue.js are user-defined directives that allow you to extend the functionality of the built-in directives. They enable developers to create reusable functionalities that can be applied to elements in the template.

How do you create a custom directive in Vue.js?

You can create a custom directive using the Vue.directive() method. You need to provide the directive name and a definition object that includes lifecycle hooks such as bind, inserted, update, and unbind.

Vue.directive('highlight', {
  // Hook that is called when the directive is bound to the element
  bind(el) {
    el.style.backgroundColor = 'yellow'; // Set initial style
  },
  // Hook that is called when the element is inserted into the DOM
  inserted(el) {
    el.focus(); // Focus the element when inserted
  }
});

How do you use a custom directive in a template?

You can use a custom directive in a template by prefixing it with v- and applying it to an HTML element. The directive will then execute the logic defined in its lifecycle hooks.

const app = new Vue({
  el: '#app',
  template: `<div v-highlight>This text will be highlighted.</div>`
});

What are the lifecycle hooks available in custom directives?

Custom directives in Vue.js can utilize several lifecycle hooks, including:

• bind: Called once when the directive is bound to the element.
• inserted: Called when the bound element is inserted into the parent node.
• update: Called whenever the component containing the directive re-renders.
• componentUpdated: Called after the component's DOM is updated.
• unbind: Called when the directive is unbound from the element.

How do you pass arguments to a custom directive?

You can pass arguments to a custom directive using the argument syntax in the template. You can then access the argument in the directive definition through the arg parameter.

Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value; // Set the color from the value
  }
});

// Usage in a template
const app = new Vue({
  el: '#app',
  template: `<p v-color="'red'">This text will be red.</p>`
});

What is the difference between directives and components in Vue.js?

Directives and components serve different purposes in Vue.js. Directives are low-level APIs used for manipulating the DOM and providing reusable behavior, while components are higher-level abstractions that encapsulate HTML, CSS, and JavaScript logic for creating reusable UI elements. Components can use directives, but directives do not encapsulate their own template.

How do you create a custom directive that modifies an element's class?

You can create a custom directive to modify an element's class by using the bind hook to apply a class based on the directive's value or argument.

Vue.directive('toggle-class', {
  bind(el, binding) {
    el.classList.toggle(binding.value); // Toggle class based on value
  }
});

// Usage in a template
const app = new Vue({
  el: '#app',
  template: `
    <div>
      <button v-toggle-class="'active'">Toggle Active Class</button>
    </div>
  `
});

What are modifiers in custom directives?

Modifiers in custom directives are special postfixes that provide additional behavior or functionality. You can define modifiers in your directive usage to apply different behaviors based on user interactions.

Vue.directive('click-outside', {
  bind(el, binding, vnode) {
    const handler = (event) => {
      if (!(el == event.target || el.contains(event.target))) {
        binding.value(event); // Call the method passed in
      }
    };
    document.addEventListener('click', handler);
    el.__vueClickOutside__ = handler; // Store handler reference for unbinding
  },
  unbind(el) {
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__; // Clean up
  }
});

// Usage with a modifier
const app = new Vue({
  el: '#app',
  methods: {
    handleClickOutside() {
      console.log('Clicked outside the element');
    }
  },
  template: `
    <div v-click-outside="handleClickOutside">Click outside this element</div>
  `
});