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

PHPz
Libérer: 2023-04-07 10:47:23
original
2507 Les gens l'ont consulté

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>
Copier après la connexion

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';
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal