La library w3.js ne permet pas de créer des composants. La fonction w3.includeHTML() requiert que le fichier appelant soit situé sur un serveur web (local ou distant)

Créer des composants (des web components) est facile avec Vue.js. Le code est encapsulé et réutilisable. Un composant est un quelque chose d'autonome qui possède des propriétés et des méthodes et qu'on peut utiliser dans le code HTML.

Code JS : Créer un composant (global)

Vue.component('mon_composant-1', {
  template: '<p class="w3-black">Mon premier composant !</p>'
});

Le nom du composant doit être entouré d'apostrophes ou de guillemets.

Le minimum = donner un nom (ici, mon_composant-1) et le template. Ensuite, il est utilisable dans la page web.

Ce nom est celui de la nouvelle balise.

Le nom d'un composant ne peut pas contenir de majuscules.
Le premier caractère doit être une minuscule (non-accentuée) : [a-z]

Caractères autorisés : [a-z][a-z0-9\-_]+

La notation camelCase est interdite, car les noms de balises et d'attributs HTML sont insensitive case.
L'utilisation du caractère trait d'union (-) n'est pas recommandé, pour ne pas prendre de mauvaises habitudes de nommage.

Cependant, l'utilisation de nouvelles balises (non HTML5) rendra le code non valide. Dès lors, l'outil Tidy pourrait ne plus fonctionner. Il convient alors de commenter ces balises, puis de les décommenter juste avant la mise en production de la page web.

Code HTML

<div id="app10">
  <mon_composant-1></mon_composant-1>
</div>

Code HTML

<div id="app10b">
  <mon_composant-2></mon_composant-2>
</div>

Code JS : Créer un composant (intégré à la vue)

new Vue({
  el: '#app10b',
  components: {
    'mon_composant-2': {
      template: '<p class="w3-black">Mon deuxième composant !</p>'
    }
  }
});

Passer des données à un composant

Code HTML

<p id="app11">
  <composant-prenom prenom="Thibaut"></composant-prenom>
</p>

Code JS

Vue.component('composant-prenom', {
  props: ['prenom'],
  template: '<p>Mon prénom est {{prenom}}</p>'
});

new Vue({
  el: '#app11'
});

Les props sont des propriétés pour lesquels le composant attend des valeurs données dans le code HTML. Le nom de cette propriété, ici seule valeur du tableau de propriétés, est prenom et donc le nom du nouvel attribut correspond de la nouvelle balise (non HTML) est aussi prenom. La valeur donnée à cet attribut, ici Thibaut, devient la valeur de la propriété. Cette valeur est ensuite utilisée dans le template via des mustaches.

Le résultat est l'affichage d'un paragraphe : Mon prénom est Thibaut.

On voit, dans le code JS, que le composant a été utilisé deux fois (dans #app11 et #app11b). Seuls, le code HTML et celui JS de la vue ont été modifiés.

Code HTML

<p id="app11b">
  <input v-model="prenomSaisi" />
  <composant-prenom v-bind:prenom="prenomSaisi"></composant-prenom>
</p>

Code JS

new Vue({
  el: '#app11b',
  data: { prenomSaisi: '' }
});

Initialement, la donnée de la Vue, prenomSaisi, est vide. La directive v-model répercute les changements du champ dans le modèle. Ici, tout ce qui est tapé est envoyé dans la donnée nommée prenomSaisi.

Le composant a une propriété, prenom, liée avec la directive v-bind: à la donnée prenomSaisi. Ainsi, ce qui est tapé passe par la donnée prenomSaisi qui est liée à la propriété du composant, prenom. Cette propriété est ensuite utilisée dans le template.

Au final, ce qui est tapé est utilisé dans le template.

Remplir une liste

Code HTML

<ul id="app12">
  <liste v-for="individu in personnes" :personne="individu"></liste>
</ul>

Code JS

new Vue({
  el: '#app12',
  data: {
    personnes: [
      {nom: "Durand", prenom: "Jacques"},
      {nom: "Dupont", prenom: "Albert"},
      {nom: "Martin", prenom: "Denis"},
    ]
  },
  components: {
    'liste': {
      props: ['personne'],
      template: '<li>{{personne.nom}} {{personne.prenom}}</li>'
    }
  }
});

La Vue contient une donnée, nommée personnes, qui est un tableau d'objets JS.

Ce tableau est parcouru à l'aide d'une boucle, via la directive v-for. À chaque tour, le contenu d'une ligne est mise dans la variable-objet nommée individu.

Le composant nommé liste a une propriété, nommée personne qui est liée, via la directive v-bind, à la variable-objet nommée individu

Au final, à chaque "individu", une "personne" est (créée et) passée dans le template.

Remplir un tableau

Code HTML

<div id="app13">
  <tableau :personnes="individus"></tableau>
</div>

Code JS

new Vue({
  el: '#app13',
  data: {
    individus: [
      {nom: "Durand", prenom: "Jacques"},
      {nom: "Dupont", prenom: "Albert"},
      {nom: "Martin", prenom: "Denis"},
    ]
  },
  components: {
    tableau: {
      props: ['personnes'],
      template: '<table class="table table-bordered">\n' +
        '<tr v-for="personne in personnes">\n' +
        '<td v-text="personne.nom"></td>\n' +
        '<td v-text="personne.prenom"></td>\n' +
        '</tr>\n' +
        '</table>\n'
    }
  }
});