Maison  >  Article  >  interface Web  >  Le rôle du monté en vue

Le rôle du monté en vue

下次还敢
下次还敢original
2024-05-02 20:48:321154parcourir

Mounted est une fonction de hook de cycle de vie dans Vue.js, qui est déclenchée immédiatement après le premier chargement réussi du composant et son insertion dans l'arborescence DOM. Les fonctions qu'il fournit incluent : initialiser les données et l'état, appeler l'API ou l'écouteur d'événements de liaison de service, manipuler le paramètre DOM, effectuer d'autres tâches d'initialisation. fonction hook dans js, qui est déclenchée immédiatement après le premier chargement réussi du composant et son insertion dans l'arborescence DOM. Il donne accès aux nœuds DOM, leur permettant d'effectuer des opérations spécifiques une fois le composant monté.

Fonction : Le rôle du monté en vue

Données et état d'initialisation :

Vous pouvez initialiser les données et l'état du composant pour vous assurer qu'il est dans l'état requis lorsque le composant est monté.

Appeler une API ou un service :

Vous pouvez appeler une API ou un service et obtenir les données nécessaires une fois le composant monté.

Lier les écouteurs d'événements :

Les écouteurs d'événements peuvent être liés aux éléments DOM pour déclencher des méthodes spécifiques lors de l'interaction de l'utilisateur.
  • Manipuler le DOM : Vous pouvez manipuler directement les nœuds DOM, par exemple en ajoutant, supprimant ou modifiant des éléments.
  • Définir le focus : Vous pouvez définir le focus d'un élément dans le composant.
  • Effectuer d'autres tâches d'initialisation : Peut effectuer toute autre tâche d'initialisation qui doit être effectuée après le montage du composant.
  • Comment utiliser :
  • Dans la fonction monté du composant, vous pouvez effectuer les opérations requises comme suit :
    <code class="javascript">mounted() {
      // 初始化数据和状态
      this.data = { ... };
    
      // 调用 API
      fetch('/api/data')
        .then(res => this.data = res.data)
        .catch(err => console.error(err));
    
      // 绑定事件侦听器
      this.$el.addEventListener('click', this.handleClick);
    
      // 操作 DOM
      this.$el.classList.add('active');
    
      // 设置焦点
      this.$el.querySelector('input').focus();
    
      // 其他初始化任务
      console.log('Component mounted!');
    }</code>
  • Remarques :
monté La fonction hook n'est déclenchée que lorsque le composant est monté pour la première fois. Si le composant est démonté puis remonté ultérieurement, il ne sera plus déclenché. <p><strong><code>monté La fonction hook ne peut pas modifier les accessoires du composant car les accessoires ont été définis avant la création du composant.

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
Article précédent:Le rôle du modèle dans vueArticle suivant:Le rôle du modèle dans vue