Discutez de plusieurs méthodes pour obtenir des éléments DOM dans Vue

Vue est un framework JavaScript populaire qui permet aux développeurs de créer facilement des applications Web interactives. L'un des besoins courants est d'obtenir des éléments DOM dans les composants Vue afin qu'ils puissent être manipulés. Cependant, Vue dispose de méthodes spéciales pour obtenir des éléments DOM. Dans cet article, nous explorerons plusieurs méthodes pour obtenir des éléments DOM dans Vue.

1. Obtenez des éléments via $refs

$refs dans Vue est un objet spécial qui fournit une référence à tous les éléments DOM du composant. Dans un composant Vue, vous pouvez nommer un élément via l'attribut ref, puis utiliser l'objet $refs pour accéder à l'élément. Voici un exemple :

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="handleClick">获取输入框的值</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$refs.myInput.value);
    },
  },
};
</script>

Dans l'exemple ci-dessus, nous avons ajouté un attribut ref à la zone de saisie et l'avons défini sur myInput. Nous pouvons accéder à cet élément en utilisant this.$refs.myInput. Dans la méthode handleClick, nous obtenons la valeur de la zone de saisie et l'imprimons sur la console.

2. Obtenez l'élément via le paramètre d'événement $event

Lors du traitement des événements DOM, le composant Vue fournit un paramètre d'événement spécial $event, qui contient toutes les informations sur l'événement, y compris l'élément cible (cible) de l'événement en cours. .

<template>
  <div>
    <input type="text" @blur="handleBlur">
  </div>
</template>

<script>
export default {
  methods: {
    handleBlur(event) {
      console.log(event.target.value);
    },
  },
};
</script>

Dans l'exemple ci-dessus, nous avons ajouté un écouteur d'événement @blur et l'avons lié à la méthode handleBlur. Lorsque la zone de saisie perd le focus, la méthode handleBlur est déclenchée. Cette méthode accepte un paramètre d'événement event et utilise event.target.value pour obtenir la valeur de la zone de saisie.

3. Utilisez des bibliothèques tierces

En plus des méthodes fournies par Vue, vous pouvez également utiliser des bibliothèques tierces pour obtenir des éléments DOM. jQuery est une bibliothèque JavaScript populaire qui facilite l'obtention et la manipulation des éléments DOM. Vous pouvez ajouter jQuery à un composant Vue, puis utiliser les sélecteurs de jQuery pour accéder aux éléments.

<template>
  <div ref="myDiv">
    <p>Hello World!</p>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  mounted() {
    const myDiv = $(this.$refs.myDiv);
    const p = myDiv.find("p");
    console.log(p.text());
  },
};
</script>

Dans l'exemple ci-dessus, nous avons ajouté un attribut ref à l'élément

et l'avons défini sur myDiv. Nous utilisons ensuite les sélecteurs jQuery dans la fonction hook Mounted() pour accéder à l'élément et à ses enfants. Enfin, nous utilisons p.text() pour obtenir le contenu du texte dans l'élément

et l'imprimer sur la console.

Pour résumer, Vue propose une variété de méthodes pour obtenir des éléments DOM, des simples $refs aux puissants sélecteurs jQuery. Les développeurs peuvent choisir la meilleure méthode pour leur application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn