Comment remplacer globalement les valeurs div dans Vue (étapes détaillées)

Vue.js est un framework JavaScript progressif populaire qui vous permet de créer facilement des interfaces utilisateur interactives. Dans Vue.js, nous utilisons généralement des directives pour modifier l'état des composants. Cependant, nous devons parfois remplacer globalement certaines valeurs dans l'ensemble de l'arborescence DOM, en particulier lorsque nous apportons des modifications visuelles à grande échelle.

Cet article expliquera comment utiliser Vue.js pour remplacer globalement la valeur d'un div dans tout le DOM.

Étape 1 : Créer une instance Vue

Tout d'abord, nous devons créer une instance Vue simple et la lier à un élément DOM. Nous pouvons créer un élément div vide en HTML et le définir comme élément racine de notre instance Vue.

<div id="app"></div>

Ensuite, en JavaScript, nous devons créer une instance Vue en passant un objet options. Nous stockons les données dans une propriété appelée message qui sera utilisée dans toute l'application.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Maintenant, nous avons créé une instance Vue simple et l'avons liée à l'élément div avec l'identifiant "app". Ensuite, nous apprendrons comment remplacer globalement la valeur d'un div.

Étape 2 : Utilisez les instructions Vue pour remplacer la valeur de div

Vue fournit de nombreuses instructions pour modifier les éléments du modèle. L'une des directives les plus couramment utilisées est v-text, qui nous permet d'insérer une valeur de chaîne directement dans un élément.

Nous pouvons créer un élément div en HTML et remplacer sa valeur à l'aide de la directive v-text. Nous définissons l'ID de l'élément div sur "mydiv".

<div id="mydiv" v-text="message"></div>

Maintenant, nous avons créé un élément div qui affiche "Bonjour Vue!" et utilisé la directive v-text pour le remplacer par l'attribut de données de message dans notre instance Vue.

Cependant, cela ne peut remplacer qu'un seul div. Et si nous voulions remplacer globalement la valeur de chaque div dans l’ensemble du DOM ?

Étape 3 : Créer une fonction de remplacement globale

Afin de remplacer globalement la valeur d'un div, nous devons écrire une fonction récursive qui parcourt l'intégralité de l'arborescence DOM et remplace la valeur de chaque div en utilisant les propriétés de données de notre exemple Instance Vue.

function replaceDivs(el) {
  if (el.tagName === 'DIV') {
    el.textContent = app.message
  }
  Array.from(el.children).forEach(replaceDivs)
}

Il s'agit d'une fonction récursive très simple qui vérifiera si l'élément qui lui est transmis est un élément div. Si tel est le cas, le contenu textuel de cet élément est défini sur la propriété message de notre instance Vue. Nous utiliserons ensuite Array.from(el.children) pour parcourir tous les enfants sous cet élément et appeler la fonction replaceDivs de manière récursive pour chaque enfant.

Étape 4 : Appeler la fonction de remplacement global

Maintenant, nous sommes prêts à appeler la fonction replaceDivs dans notre application. Nous pouvons appeler cette fonction dans le hook de cycle de vie monté de l'instance Vue pour garantir que sa valeur est remplacée une fois l'arborescence DOM complètement chargée.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mounted: function () {
    replaceDivs(document.body)
  }
})

Maintenant, dans le hook de cycle de vie monté de l'instance Vue, nous appellerons la fonction replaceDivs, en passant document.body comme paramètre. Cela exécutera la fonction et l'appliquera à l'ensemble de l'arborescence DOM.

Conclusion

Maintenant, nous avons appris comment remplacer globalement la valeur d'un div à l'aide de Vue.js. Nous avons créé une instance Vue simple, modifié la valeur d'un seul div à l'aide de la directive v-text, puis écrit une fonction récursive pour remplacer globalement la valeur du div.

Vue.js est très important pour les développeurs qui écrivent des frontaux interactifs. Il fournit un ensemble d'outils simples mais puissants qui nous aident à créer des applications complexes et à modifier facilement l'état des éléments dans l'arborescence DOM.

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!