Voir la source de Vue.js

{{tutoriel
|fait_partie_du_cours=Initiation à la pensée computationnelle avec JavaScript
|fait_partie_du_module=JavaScript dans le navigateur
|module_précédant=Concepts de base de JavaScript
|module_suivant=JavaScript sur le serveur
|pas_afficher_sous-page=Non
|page_precedente=JQuery UI
|page_suivante=JavaScript sur le serveur
|statut=à finaliser
|difficulté=intermédiaire
|cat tutoriels=JavaScript
}}
== Introduction ==

[https://vuejs.org/ Vue.js] est une [[bibliothèques JavaScript|bibliothèque JavaScript]] qui facilite la création d'interfaces utilisateur côté client dans les pages/applications web. Contrairement à d'autres bibliothèques de ce type (e.g. Angular, React, ...), Vue.js adopte une approche progressive qui peut être plus convenable à des développeurs débutant/intermédiaires. Sa caractéristique principale en ce sens consiste à fournir des mécanismes de "binding" entre les éléments HTML qui composent le DOM de la page et le code JavaScript qui modifie ces éléments, souvent suite à des interactions de l'utilisateur.

=== Note sur la version ===

Cette page se réfère à la version 2.x de la bibliothèque (voir [[Versionnage sémantique]])

=== Prérequis ===

L'utilisation de Vue.js nécessite une bonne compétence en [[JavaScript]], voir :

* [[Tutoriel JavaScript de base]]
* [[ Tutoriel JavaScript côté client]]

La bibliothèque ne dépend pas d'autres bibliothèques, mais peut être facilement intégrée, par exemple avec [[jQuery]]. 

Une bonne connaissance en [[CSS]] est également nécessaire. Dans certains exemples présentés dans cette page le framework CSS [[Bootstrap]] est utilisé pour la mise en page, mais son utilisation n'est pas indispensable.

== Comparaison avec ''vanilla'' JavaScript ==

À travers des extensions du langage HTML ou directement par la création de composantes (en anglais ''components''), Vue.js permet de surmonter certaines difficultés qu'on peut rencontrer en utilisant du ''vanilla'' JavaScript ou une bibliothèque comme [[jQuery]], notamment en ce qui concerne la mise à jour du DOM après le déclenchement d'un événement. Considérez ce simple exemple en ''vanilla'' JavaScript qui met à jour un compteur lorsqu'on clique sur un bouton.

;Code HTML (seulement du body) :

<source lang="HTML5">
<h1>Client Side JavaScript</h1>
<p><button id="add">Click here to increment the count</button><span id="output">0</span></p>
</source>

;Code JavaScript :

<source lang="JavaScript">
var count = 0;
var btnAdd = document.getElementById("add");
var output = document.getElementById("output");

btnAdd.onclick = function () {
  count++;
  output.innerHTML = count;
}
</source>

* Voir cet exemple http://codepen.io/mafritz/pen/NNmgqG

Vous pouvez voir dans le code JavaScript que lorsqu'on a mis à jour le compteur avec <code>count++</code>, il est nécessaire de mettre à jour le contenu du noeud HTML (i.e. le span avec id="output") pour qu'on puisse établir une correspondance entre :

* La valeur de la variable <code>count</code> telle qu'elle existe dans la logique du code JavaScript
* La valeur de cette variable qui est affichée à l'utilisateur à travers <code>output.innerHTML</code>

Voici le même exemple en utilisant Vue.js ('''attention: il faut inclure la bibliothèque, voir plus bas dans la page''').

;Code HTML (seulement du body) :

<source lang="HTML5">
<h1>Simple counter with Vue.js</h1>
<div id="counter">
  <button v-on:click="increment">Click me many times!</button> Number of click: <strong>{{ count }}</strong>
</div>
</source>

;Code JavaScript :

<source lang="JavaScript">
var counter = new Vue({
  el: '#counter',
  data: {
    count: 0
  },
  methods: {
    increment: function() {
      this.count++;
    }
  }
});
</source>

* Voir cet exemple http://codepen.io/mafritz/pen/peOWbd

Les éléments à remarquer dans le code HTML sont principalement deux :

* La notation <code>v-on:click</code> qui est associée à la méthode '''increment''' dans le code JavaScript
* La notation <code><nowiki>{{ count }}</nowiki></code> qui est associée de manière automatique à la valeur de la propriété '''data.count''' dans le code JavaScript

== Modèle-Vue-Contrôleur ==
[[Fichier:Vue-MVC.png|400px|vignette|droite|Application du concept Modèle-Vue-Contrôleur à l'exemple du compteur (voir plus haut)]]

L'architecture de Vue.js est basée sur l'un des paradigmes des développement les plus utilisés dans les applications web, le [https://fr.wikipedia.org/wiki/Mod%C3%A8le-vue-contr%C3%B4leur '''Modèle-Vue-Contrôleur'''] ('''MVC'''). Ce paradigme suggère la division d'une application en trois processus qui s'influencent mutuellement :

* '''Modèle'''
*: C'est l'équivalent de la structure des données sur laquelle on veut apporter des manipulations. Cela peut être représenté par plusieurs éléments ou, comme dans l'exemple comparatif du compteur plus haut, seulement par la valeur/chiffre du compteur.
* '''Vue'''
*: C'est l'équivalent de l'interface utilisateur, c'est-à-dire la manière tangible que les utilisateurs ont pour interagir avec l'application, à la fois pour recevoir les informations (output) et les modifier (input). Dans l'exemple de base, ceci est représenté par la combinaison entre le HTML et la notation particulière à Vue.js.
* '''Contrôleur'''
*: C'est le collant entre le modèle et la vue, c'est-à-dire la partie logique de l'application qui s'occupe de maintenir synchronisé le modèle des données avec les informations affichées ou manipulées sur l'interface utilisateur. Dans l'exemple plus haut, ce rôle est pris en charge par l'objet <code>new Vue({ ... })</code> qui s'occupe, par exemple à travers la méthode <code>increment()</code> de mettre à jour le modèle (le chiffre du compteur) et d'appliquer le changement sur l'interface utilisateur.

De manière encore plus conceptuelle, le MVC est une implémentation d'une philosophie/théorie appelée '''[https://fr.wikipedia.org/wiki/S%C3%A9paration_des_pr%C3%A9occupations Séparation des préoccupations'''], ou en anglais ''Separation of Concerns'' (SoC). L'idée est de décomposer la complexité d'une application en différentes parties qui s'occupent, toutes, d'un rôle bien spécifique.

Par exemple, dans les bonnes pratiques du paradigme MVC, le contrôleur s'occupe seulement du lien entre la vue et le modèle, et non pas d'autre type d'opérations plus complexes. En gardant le simple exemple du compteur, donc, si on voulait sauvegarder la valeur actuelle du compteur quelque parte, la logique pour le faire devrait être gérée par le modèle et non pas par le contrôleur. Ceci nous permettrait dans un deuxième temps, par exemple :

* de passer d'une sauvegarde dans un fichier à une sauvegarde dans une base de données sans avoir à modifier ni le contrôleur, ni la vue de notre application.
* de modifier le compteur avec une incrémentation de 5 au lieu de 1 unité en modifiant seulement la simple logique du contrôleur
* de changer l'interface graphique pour afficher le compteur plus grand ou deux fois dans la page en modifiant seulement la vue.

== Installation ==

Comme toute bibliothèque JavaScript côté-client, Vue.js peut être installée tout simplement en incorporant le fichier .js dans la page HTML qui l'utilise. Pour ce faire vous pouvez :

# Télécharger la dernière version (2.x au moment de l'écriture de cette page, mars 2017) depuis le [https://vuejs.org/v2/guide/installation.html site officiel]
# Utilisez le lien à une CDN
# '''Pour niveau intermédiaire/expert''': Installez et utiliser une extension en ligne de commande vue-cli (nécessite installation de [[Node.js]]) 

=== Fichier téléchargé ===

Téléchargez vos fichiers depuis le [https://vuejs.org/v2/guide/installation.html site officiel].

Veillez à bien utiliser la version ''Development version'' pendant le développement car elle propose des messages d'erreurs dans la console qui peuvent vous aider à éviter des fautes dans l'utilisation de la bibliothèque :

 <script src="path/to/your/local/file/vue.js"></script>

Lorsque vous avez terminé le développement, vous pouvez passer à la version ''minified'' de la bibliothèque :

 <script src="path/to/your/local/file/vue.min.js"></script>

=== CDN ===

Le site officiel vous conseille d'utiliser la Content Delivery Network unpkg qui propose la dernière version de la bibliothèque :

 <script src="https://unpkg.com/vue/"></script>

En alternative vous pouvez choisir une version spécifique, par exemple :

 <script src="https://unpkg.com/vue@2.2.6/dist/vue.min.js"></script>

=== Extension en ligne de commande ===

'''Pour intermédiaires/experts''': cette option nécessite l'installation dans votre système de [[Node.js]] et une certaine familiarité avec l'installation/utilisation des modules Node ainsi que la ligne de commande.

Commande pour installation global du module :

 npm install -g vue-cli

Ensuite vous pouvez utiliser la commande <code>vue</code> dans votre ligne de commande pour créer des squelettes de projets qui utilisent Vue.js. Par exemple cette commande :

 vue simple my-simple-vue-app

crée un dossier <code>my-simple-vue-app</code> dans la position actuelle de votre ligne de commande avec un simple fichier <code>index.html</code> avec une simple mise en place de la bibliothèque que vous pouvez ensuite modifier.

Il existe des configurations plus complexes et puissantes mais qui ne sont pas abordées dans cette page, voir la [https://github.com/vuejs/vue-cli page du projet sur GitHub] pour plus d'information.

== Utilisation de la bibliothèque ==

Vue.js peut être adopté de manière progressive, c'est-à-dire qu'on peut l'utiliser très facilement pour un projet simple, mais également pour des applications plus complexes. Le [https://vuejs.org/v2/guide/ guide officiel] est, pour une fois, très bien organisée, donc dans cette page nous nous limitons à un aperçu des principales caractéristiques et au fonctionnement de la bibliothèque.

* Voir [https://vuejs.org/v2/guide/ le guide officiel (version 2.X)] pour plus d'information

=== Fonctionnement de base ===

La "magie" de Vue.js se fait à travers l'objet JavaScript <code>new Vue()</code> qui est mis à disposition par la bibliothèque. Cet objet (i.e. il s'agit d'un object '''constructeur''') accepte différents paramètres, sous forme d'un objet ''normal'' JavaSscript :

<source lang="JavaScript">
var appVueJS = new Vue({
  //Spécification de l'objet de configuration
});
</source>

L'objet de configuration peut contenir plusieurs associations clé-valeurs. Ici de suite nous proposons les éléments nécessaires pour un exemple basique :

# La propriété '''el''' qui identifie l'élément HTML "conteneur" (e.g. #myVueDiv)
# La propriété '''data''' qui est associée un autre objet avec les associations clés-valeurs des propriétés/données à utiliser dans l'application
# La propriété '''methods''' qui est associée à un autre objet avec les associations clés-valeurs des méthodes/fonctions à utiliser dans l'application

<source lang="JavaScript">
var appVueJS = new Vue({
  //Identify the element
  el: '#myAppContainer',
  //Provide data model
  data: {
    course: "STIC I",
    credits: 6,
    exercices: [1, 2, 3, 4, 5, 6]
  },
  //Define methods/functions
  methods: {
    printName: function () {
       console.log(this.course);
    },
    goToEduTechWiki: function () {
       window.location = "https://edutechwiki.unige.ch"
    }
  }
});
</source>

Ensuite, les données et méthodes déclarée au niveau du code JavaScript peuvent être intégrées dans le code HTML de la page à travers une extension du langage HTML de base, c'est-à-dire à travers :

* Une notation spécifique telle que la notation déclarative <code><nowiki>{{ ... }}</nowiki></code>
* Des attributs qui peuvent être ajouté aux éléments HTML comme par exemple <code>v-if</code>, <code>v-for</code>, <code>v-on:clik</code>, etc.

=== L'importance d'identifier l'élément HTML qui détermine le scope de l'application ===

Parmi les éléments qui composent l'objet de configuration, celui auquel il faut prêter une attention particulière est la propriété '''el''' qui identifie l'élément dans le code HTML. Vous pouvez décider quel élément dans votre page aura la fonction de conteneur, mais il faut en tout cas '''éviter d'utiliser les balises html ou body''' et utiliser  plutôt, par exemple, une balise '''div'''. Cet élément représentera par la suite le '''scope''', c'est-à-dire le conteneur à l'intérieur duquel s'appliquent les '''data''' et les '''methods''' déclarés. Voici un exemple qui illustre ce mécanisme.

Code HTML :

<source lang="HTML5">
<h1>Element/Scope application of Vue.js</h1>
<ul>
  <li id="app1">{{ message }}</li>
  <li id="app2">{{ message }}</li>
  <li id="no-app">{{ message }}</li>
</ul>
</source>

Code JavaScript :

<source lang="JavaScript">
var app1 = new Vue({
  el: '#app1',
  data: {
    message: 'My message for the first element with id app1'
  }
});

var app2 = new Vue({
  el: '#app2',
  data: {
    message: 'I will apply to another scope, that is the app2 element'
  }
});
</source>

* Voir cet exemple http://codepen.io/mafritz/pen/evPmmJ

Le contenu de la liste non ordonnée qui s'affiche à l'utilisateur sera le suivant :

* My message for the first element with id app1
* I will apply to another scope, that is the app2 element
* <nowiki>{{ message }}</nowiki>

Ceci en raison du fait que la valeur de la variable <code>message</code> s'applique exclusivement à l'intérieur de l'élément identifié par la propriété '''el'''. Étant donné que le troisième li n'est pas identifié en tant qu'élément conteneur par un objet <code>new Vue()</code>, la notation <nowiki>{{ message }}</nowiki> n'est pas interprétée.

=== Le rendering dans le code HTML ===

Comme on l'a vu plus haut avec la notation <nowiki>{{ ... }}</nowiki>, Vue.js permet de modifier le contenu du code HTML après que le code source a été téléchargé par le navigateur. Cette possibilité peut s'appliquer à tous les éléments HTML d'une page à condition qu'ils se trouve à l'intérieur d'un élément "conteneur" identifié par Vue.js en tant que '''scope''' (voir point précédent). Ce mécanisme de rendering est par contre différent selon quel type de contenu des éléments HTML on veut modifier.

==== Modification du contenu d'un noeud====

Si on veut modifier le contenu d'un nœud HTML, comme par exemple le texte d'un paragraphe, alors il faut utiliser la notation <nowiki>{{ ... }}</nowiki>.

 <nowiki><p>{{ message }}</p></nowiki>

La notation <nowiki>{{ ... }}</nowiki> peut également évaluer (avec des limitations) du code JavaScript, donc on peut par exemple imaginer de transformer le texte en majuscules :

 <nowiki><p>{{ message.toUpperCase() }}</p></nowiki>

==== Modification d'attributs d'un noeud ====

Au contraire, si on veut récupérer de manière ''dynamique'' le contenu d'un attribut d'un élément HTML, il faut plutôt utiliser la notation <code>v-bind:attribut</code> comme par exemple :

 <img v-bind:title="message">

Dans ce cas si vous passez sur l'image avec la souris pour déclencher l'attribut HTML title, vous ne verrez pas s'afficher "message" mais plutôt la valeur associé à la '''propriété data.message''' dans votre code JavaScript.

=== Double binding ===

Une autre caractéristique très utile de Vue.js est la possibilité de créer un "double binding" entre les données du code JavaScript et l'affichage dans la page HTML. Cela se traduit par le fait que :

* Si la valeur d'une donnée change au niveau du code, son affichage dans la page HTML se met à jour automatiquement
* Si la valeur d'une donnée est modifiée à travers un élément interactif de la page HTML (e.g. un input), elle sera mise à jour automatiquement dans le code (et par conséquent également dans d'autres endroits de la page qui font référence à cette donnée)

Voici un exemple qui illustre ce principe.

;Code HTML

<source lang="HTML5">
<div class="container-fluid" id="app">
  <h1>Double binding with Vue.js</h1>
  <hr>
  <h2>Shout box</h2>
  <div class="form-group">
    <label>What do you want to shout?</label>
    <input class="form-control input-lg" v-model="shout">
  </div>
  <h3>You are shouting: {{ shout.toUpperCase() }}</h3>
  <hr>
  <h2>Addition</h2>
  <input v-model.number="firstNumber" type="number"> + <input v-model.number="secondNumber" type="number"> = {{ firstNumber + secondNumber }}
</div>
</source>

;Code JavaScript

<source lang="JavaScript">
new Vue({
  el: '#app',
  data: {
    shout: '',
    firstNumber: 100,
    secondNumber: 50
  }
});
</source>

* Voir cet exemple http://codepen.io/mafritz/pen/ZeqQeO

À travers l'attribut <code>v-model="donnée"></code> on peut très facilement relier de manière bidirectionnelle du contenu modifié par l'action d'un utilisateur avec le modèle des données tel qu'il est déterminé dans le code. 

Veuillez noter que dans le cas de l'addition, on peut spécifier <code>v-model.number</code> pour être sûr que le contenu de l'input soit traité en tant que Number() et pas String() pour éviter d'obtenir "100" + "50" = "10050".

=== Évenements/Actions utilisateur ===

Vue.js met à disposition une syntaxe pour créer/associer des gestionnaires d'événements directement aux éléments HTML de la page à travers des attributs tels que :

* <code>v-on:click="''gestionnaire''"</code>
* <code>v-on:sumbmit="''gestionnaire''"</code>

Ces attributs peuvent être définis d'avantage à travers des ajouts, par exemple :

* <code>v-on:submit.prevent="''gestionnaire''"</code> peut être utilisé en association avec un <code>form</code> pour éviter que la soumission du formulaire recharge la page
* <code>v-on:key.enter="''gestionnaire''"</code> répond à la touche enter du clavier

On peut ensuite associer ces événements à :

* Directement du code JavaScript (déconseillé si ce n'est pour des manipulations très simples)
* À une méthode déclarée dans l'objet <code>new Vue()</code>

==== Utiliser directement du code JavaScript ====

On peut associer à un événement directement du code JavaScript à évaluer, ce qui peut être utile surtout pour des manipulations simples, comme par exemple modifier la valeur d'une variable :

 <button v-on:click="counter++">Increment</button> | <button v-on:click="counter = 0">Reset</button>

* Voir cet exemple http://codepen.io/mafritz/pen/QpZXYJ (exemple 1)

==== Utiliser une méthode déclarée dans l'objet new Vue() ====

Pour des gestionnaire plus complexes, on peut utiliser des méthodes définies à l'intérieur de la configuration de l'objet new Vue() associé au scope de l'élément. Voici un exemple.

;Code HTML
<source lang="JavaScript">
<div class="container-fluid" id="app">
  <h1>Events/Actions in Vue.js</h1>
  <hr>
  <h2>2. Form submission</h2>
  <form v-on:submit.prevent="check">
    <div class="form-group">
      <label>Vue.js is a framework written in?</label>
      <input v-model="answer" required class="form-control">
    </div>
    <button type="submit" class="btn btn-primary">Check</button>
  </form>
</div>
</source>

;Code JavaScript
<source lang="JavaScript">
new Vue({
  el: '#app',
  data: {
    answer: ''
  },
  methods: {
    check: function () {
      if (this.answer.toLowerCase() === 'javascript') {
        alert("Yes!");
      } else {
        alert("Nope, try again!")
      }
    }
  }
});
</source>

* Voir cet exemple http://codepen.io/mafritz/pen/QpZXYJ (exemple 2)

Dans cet exemple la méthode/fonction <code>check()</code> est associée à l'événement <code>v-on:submit.prevent</code> du formulaire.

Dans le gestionnaire d'événement on peut également passer un ou plusieurs arguments, à l'occurrence :

 <button v-on:click="doSomething('with this argument')">Do something</button>

'''Faites attention dans ce cas à ne pas mélanger les guillemets de l'attribut HTML avec des valeurs passées en argument.'''

=== Boucles et structure de contrôle ===

Vue.js permet ensuite d'intégrer des boucles et de structures de contrôle directement au niveau de l'affichage HTML, ce qui facilite énormément le codage et la mise à jour du DOM par rapport au ''vanilla'' JavaScript (e.g. document.createElement() etc.). L'intégration se fait tout simplement en utilisant des attributs dans les éléments HTML qui se trouve à l'intérieur d'un scope Vue.js. Voici un exemple.

;Code HTML
<source lang="HTML5">
<div class="container-fluid" id="app">
  <h1>Loops and conditionals in Vue.js</h1>
  <hr>
  <h2>List of grades:</h2>
  <ul>
    <li v-for="item in grades">
      {{ item.course}} : {{ item.grade }} <span class="font-weight-bold text-danger" v-if="item.grade < 4">Failed!</span>
    </li>
  </ul>
</div>
</source>

;Code JavaScript
<source lang="JavaScript">
new Vue({
  el: '#app',
  data: {
    grades: [
      {
        course: 'STIC I',
        grade: 5.5
      }, {
        course: 'STIC II',
        grade: 3.75
      }, {
        course: 'ERGO I',
        grade: 6
      }, {
        course: 'ERGO II',
        grade: 3.5
      }
    ]
  }
});
</source>

* Voir cet exemple http://codepen.io/mafritz/pen/VpEeJg

Grâce à la notation <code>v-for="item in grades"</code> associé à l'élément <code>li</code> on peut facilement créer une itération de tous les éléments de l'array d'objet grades. À l'intérieur de chaque itération, on utilise la notation <code>v-if="item.grade < 4"</code> pour déterminer si la note obtenue doit être accompagnée (ou pas) d'un menaçant "Failed!".

== Techniques avancées ==

=== Valeurs computées ===

Parfois il est utile de créer des données qui sont déterminées par les valeurs d'autres données. Si on prend l'exemple précédent de la liste de notes, on peut imaginer d'afficher la moyenne des cours. Dans ce cas, on peut utiliser la propriété '''computed''' dans notre objet Vue.js.

;Code HTML

<source lang="HTML5">
<div class="container-fluid" id="app">
  <h1>Computed value in Vue.js</h1>
  <hr>
  <h2>List of grades:</h2>
  <ul>
    <li v-for="(item, index) in grades">
      {{ item.course}} : {{ item.grade }} <span class="font-weight-bold text-danger" v-if="item.grade < 4">Failed!</span> <button class="btn btn-default btn-sm" v-on:click="removeGrade(index)" v-if="grades.length > 1">X</button>
    </li>
  </ul>
  <h4>Your mean is {{ mean }}</h4>
  <p>Add a new grade</p>
  Course: <input v-model="newCourse"> Grade: <input v-model.number="newGrade" type="number" min="0" max="6" step="0.25"> <button class="btn btn-primary" v-on:click="addGrade">Add grade</button>
</div>
</source>

;CodeJavaScript

<source lang="JavaScript">
new Vue({
  el: '#app',
  data: {
    grades: [{
      course: 'STIC I',
      grade: 5.5
    }, {
      course: 'STIC II',
      grade: 3.75
    }, {
      course: 'ERGO I',
      grade: 6
    }, {
      course: 'ERGO II',
      grade: 3.5
    }],
    newCourse: '',
    newGrade: ''
  },
  computed: {
    mean: function() {
      var sum = this.grades
        .map(function(item) {
          return item.grade;
        })
        .reduce(function(a, b) {
          return a + b;
        });
      return (sum / this.grades.length).toFixed(2);
    }
  },
  methods: {
    addGrade: function () {
      this.grades.push({
        course: this.newCourse,
        grade: this.newGrade
      });
      this.newCourse = '';
      this.newGrade = '';
    },
    removeGrade: function (index) {
      console.log(index);
      this.grades.splice(index, 1);
    }
  }
});
</source>

* Voir cet exemple http://codepen.io/mafritz/pen/KWGzqv

Par rapport à l'exemple précédent, nous avons ajouté la propriété '''computed''' qui contient la clé '''mean'''. Cette clé se caractérise par rapport à celles contenu dans '''data''' parce qu'elle est une méthode (i.e. une fonction). En effet, Vue.js appelle automatiquement cette fonction pour que la moyenne se mette à jour chaque fois qu'on ajoute une nouvelle note (à travers '''methods.addGrade''' ou '''methods.removeGrade''').

Veuillez faire attention au fait que lorsqu'on se réfère à des données dans les valeurs computées ou dans les méthodes, il faut utiliser la notation <code>this.''nameOfTheProperty''</code>.

=== Composantes ===

Vue.js permet également de créer des composantes (''components'' en anglais). Il s'agit de bout de code qui peuvent être réutilisés à travers des balises définies directement par le développeurs, par exemple :

<source lang="HTML5">
<div id="app">
  <my-stic-component></my-stic-component>
</div>
</source>

Dans ce cas, on peut définir à quoi correspond la balise <code><my-stic-component></code> à travers la notation suivante :

<source lang="JavaScript">
//Fichier JavaScript
Vue.component('my-stic-component', {
  //Caractéristiques du component
});
</source>

Pour utiliser un component il faut :

#L'utiliser à l'intérieur d'une "application" Vue.js, c'est-à-dire à l'intérieur d'un élément HTML qui est défini en tant que scope pour l'objet <code>new Vue()</code>
#Déclarer le component '''avant''' l'application/élément scope

Pour compléter l'exemple :

;Code HTML
<source lang="HTML5">
<div id="app">
  <my-stic-component></my-stic-component>
  <p>Just a dummy paragraph</p>
</div>
</source>

;Code JavaScript
<source lang="JavaScript">
//Avant définir le component
Vue.component('my-stic-component', {
  template: '<h1>Welcome to STIC!</h1>'
});

//Définir l'application/élément scope
new Vue({
  el: '#app'
});
</source>

* Voir cet exemple http://codepen.io/mafritz/pen/XMOGyP

À ce moment, la balise <code>my-stic-component</code> sera remplacée par le contenu du '''template''' défini dans <code>Vue.component('my-stic-component', ...)</code>, c'est-à-dire avec un titre de premier niveau '''Welcome to STIC'''.

On peut utiliser les components de manières bien plus complexes :

* On peut passer de l'information de l'application au component, par exemple pour créer des éléments qui se répètent dans la page
* On peut passer de l'information du component à l'application à travers un système de gestion des événements

Pour plus d'information, voir [https://vuejs.org/v2/guide/components.html la documentation officielle]

=== Intégration avec autre code JavaScript ===

On peut également interagir avec les données et méthodes d'une application/élément scope de Vue.js à travers d'autres bouts de code JavaScript. En effet, Vue.js "expose" les objets <code>new Vue()</code> de manière trasparente. Par exemple :

;Code HTML
<source lang="HTML5">
<div id="app">
  <p>Message: {{ message }}</p>
  <p>Source: {{ source }}</p>
</div>
<hr>
<button id="outsideBtn">Button outside Vue.js element</button>
</source>

;Code JavaScript
<source lang="JavaScript">
//Define Vue.js application/element scope
var myVue = new Vue({
  el: '#app',
  data: {
    message: 'Vue.js message',
    source: 'Vue.js object'
  },
  methods: {
    changeMessage: function () {
      this.message = 'The message has been changed'
    }
  }
});

//Use a button outside Vue.js element
var outSideButton = document.getElementById('outsideBtn');
outSideButton.addEventListener('click', function () {
  myVue.changeMessage();
  myVue.$data.source = 'JavaScript button';
});
</source>

* Voir cet exemple http://codepen.io/mafritz/pen/EWrJQx

Pour pouvoir avoir accès à l'objet <code>new Vue()</code> il faut d'abord l'associer à une variable et ensuite utiliser cette variable pour accéder aux éléments internes. On peut par exemple:

* Accéder aux données à travers la notation ''variableName''.$data.''propertyName''
* Accéder aux méthodes à travers la notation ''variableName''.''methodName''

Il est également possible d'accéder à d'autres éléments. Voir la [https://vuejs.org/v2/guide/instance.html documentation officielle] pour plus de détails.

== Ressource ==

=== Exemples ===

* [https://codepen.io/collection/XQpLMP/ Collections CodePen avec les exemples présentés dans la page]

=== Liens ===

* [https://vuejs.org/ Site officiel]
* [https://github.com/vuejs/vue Page GitHub du projet]
* [https://vuejs.org/v2/guide/ Documentation pour la version 2.x]
* [https://medium.com/codingthesmartway-com-blog/vue-js-2-quickstart-tutorial-2017-246195cfbdd2 Tutoriel avancé avec Vidéo]
* [https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/ Comparaison avec jQuery]

[[Catégorie: JavaScript]]
[[Category: Ressources STIC]]