Custom Directives for DOM Access

Snippet

Custom Directives for DOM Access

Custom directives allow you to perform low-level DOM manipulations on plain elements. They provide lifecycle hooks similar to components (created, mounted, updated, unmounted).

snippet.js
javascript
const vFocus = {
  mounted: (el) => {
    el.focus();
    el.style.borderColor = 'red';
  }
};
 
// Usage in template: <input v-focus />

vue

Breakdown

mounted: (el) => { ... }

The hook called when the element is inserted into the document.

el.focus();

Native DOM method to focus the element directly.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Custom Directives for DOM Access

Related