javascript / intermediate
Snippet
DOM-Manipulation über benutzerdefinierte Direktiven
Benutzerdefinierte Direktiven bieten eine Möglichkeit, Low-Level-Logik für den DOM-Zugriff in Ihrer Anwendung wiederzuverwenden. Durch Definieren eines Direktiven-Objekts mit Lifecycle-Hooks wie 'mounted' können Sie Elemente direkt manipulieren, z. B. um automatisch einen Eingabefokus auszulösen, wenn eine Komponente gerendert wird.
snippet.js
1
2
3
4
5
6
7
8
const vFocus = {mounted: (el) => {el.focus();}};// Usage in template:// <input v-focus />
vue
Erklärung
1
const vFocus = { ... };
Die Benennung der Variable beginnend mit 'v' erlaubt die Verwendung als Direktive in Script Setup.
2
mounted: (el) => { ... }
Ein Hook, der ausgeführt wird, sobald das Element an den DOM-Baum angehängt wurde.
3
el.focus();
Standard-JavaScript-DOM-Methode, um den Fokus auf das Ziel-Element zu setzen.