Maison >interface Web >Questions et réponses frontales >Qu'est-ce que vue $el ? A quoi ça sert ?

Qu'est-ce que vue $el ? A quoi ça sert ?

PHPz
PHPzoriginal
2023-04-07 09:30:302553parcourir

Vue $el est une propriété de l'instance Vue, utilisée pour obtenir l'élément DOM associé à l'instance Vue.

Dans Vue, nous exploitons les données et implémentons le rendu des modèles via des instances Vue, mais ce qui est finalement rendu sur la page est l'élément DOM associé à l'instance Vue. L'attribut Vue $el est utilisé pour obtenir cet élément DOM.

Grâce à l'attribut Vue $el, nous pouvons obtenir l'élément DOM associé à l'instance Vue actuelle, puis utiliser l'API DOM native pour opérer sur cet élément DOM.

Par exemple, supposons que nous ayons une instance Vue avec le code suivant :

<div id="app">
  {{ message }}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!'
    }
  })
</script>

Dans cet exemple, nous définissons une instance Vue et l'associons à un élément DOM avec l'identifiant de l'application. Nous pouvons obtenir l'élément DOM via l'attribut Vue $el, puis l'exploiter via du code JavaScript natif, par exemple :

var app = vm.$el;
app.style.color = 'red';

Le code ci-dessus changera la couleur de police de l'élément DOM rendu par l'instance Vue en rouge.

Il est à noter que l'attribut $el n'existe pas toujours pendant le cycle de vie de l'instance Vue. Ce n'est qu'une fois l'instance Vue rendue sur la page que l'attribut $el se verra attribuer la valeur de l'élément DOM associé à l'instance Vue. Par conséquent, nous ne pouvons accéder à la propriété $el qu’une fois l’instance montée. Une fois l'instance détruite, la propriété $el est également automatiquement détruite.

En résumé, l'attribut Vue $el est utilisé pour obtenir les attributs de l'élément DOM associé à l'instance Vue, et ne peut être utilisé qu'après le montage de l'instance Vue. Grâce à l'attribut $el, nous pouvons directement exploiter les éléments DOM associés et implémenter certaines fonctions JavaScript natives.

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