javascript / intermediate
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
1
2
3
4
5
6
7
8
const vFocus = {mounted: (el) => {el.focus();el.style.borderColor = 'red';}};// Usage in template: <input v-focus />
vue
Breakdown
1
mounted: (el) => { ... }
The hook called when the element is inserted into the document.
2
el.focus();
Native DOM method to focus the element directly.