Un guide complet / Blogs / Perficient

Quelle est cette référence dans Vue.js ?

L’attribut ref revient à donner un nom à un élément HTML ou à une partie de votre modèle Vue. Ce nom vous permet d’interagir directement avec et de modifier ces éléments ou composants à l’aide de JavaScript.

Un exemple pratique

Mettons les choses au clair en plongeant dans un exemple simple. Imaginez que vous ayez un bouton qui, lorsque vous cliquez dessus, modifie le texte d’un paragraphe. Vous pouvez utiliser « ref » pour saisir facilement le paragraphe et modifier son contenu sans aucun problème.

Modèle: Dans le modèle, générez un élément de paragraphe et attribuez-lui une référence nommée « textElement ». A côté de cela, intégrez un bouton comportant un événement de clic qui déclenche la méthode « changeText ».

Scénario: Dans la section JavaScript, établissez une méthode intitulée « changeText ». Dans cette méthode, exploitez this.$refs.textElement pour cibler spécifiquement le paragraphe identifié par la référence « textElement ». On peut alors mettre à jour la propriété innerText pour lui donner un nouveau texte.

Voici à quoi ressemble la partie HTML :

Sortir:

Cliquez sur « Modifier le texte » et voilà : le paragraphe indique désormais « Le texte a été modifié avec succès ! »

Comment tout cela fonctionne

• Lorsque le composant est chargé, il affiche le modèle HTML avec le paragraphe et le bouton.
• Lorsque quelqu’un clique sur le bouton « Modifier le texte », cela déclenche la méthode changeText.
• À l’intérieur de la méthode, this.$refs.textElement nous aide à trouver l’élément de paragraphe avec la référence définie comme « textElement ».
• Nous définissons ensuite la propriété innerText de cet élément sur le nouveau texte que nous souhaitons afficher.
• En conséquence, le texte à l’intérieur du paragraphe devient « Texte modifié avec succès ! »

Pourquoi utiliser la référence ?

L’utilisation de ref dans Vue.js offre des avantages évidents :

• Rapprochez-vous et personnel : ref vous donne un accès direct aux éléments et composants DOM, simplifiant ainsi votre code.
• Mises à jour instantanées : Toutes les modifications que vous apportez à l’aide de ref apparaissent immédiatement dans votre modèle, ce qui rend votre application réactive et conviviale.
• Meilleure interaction : C’est très pratique pour gérer les interactions des utilisateurs, comme les soumissions de formulaires, les animations ou les mises à jour de contenu dynamique.

Pour résumer, la fonctionnalité « ref » de Vue.js est comme un outil utile qui facilite la connexion de votre modèle et du code JavaScript. Il simplifie le processus de gestion des éléments et composants DOM, vous donnant la possibilité de créer sans effort des applications Web dynamiques et interactives.