Cabinet Aurore MAGELYS

Source: https://vuejs.org/v2/guide/

# Qu'est-ce que Vue.js

Vue (prononcé /vjuː/, comme le terme anglais view) est un framework évolutif pour construire des interfaces utilisateur. À la différence des autres frameworks monolithiques, Vue a été conçu et pensé pour pouvoir être adopté de manière incrémentale. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l’intégrer avec d’autres bibliothèques ou projets existants. D’un autre côté, Vue est tout à fait capable de faire tourner des applications web monopages quand il est couplé avec des outils modernes et des bibliothèques complémentaires.

Le site web est construit avec Vue.js version 2.

# Rendu déclaratif

Au cœur de Vue.js, un système permet de faire le rendu des données déclarativement dans le DOM en utilisant une syntaxe de template relativement simple :

  • HTML:
<div id="app">
  {{ message }}
</div>
  • Javascript:
var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!",
  },
});

En plus de l’interpolation de texte, il est aussi possible de lier les attributs d’un élément comme ceci :

  • HTML:
<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound
    title!
  </span>
</div>
  • Javascript:
var app2 = new Vue({
  el: "#app-2",
  data: {
    message: "You loaded this page on " + new Date().toLocaleString(),
  },
});

Cet exemple illustre l'utilisation de l’attribut v-bind:title. v-bind est une directive.

Les directives sont préfixées par v- pour indiquer que ce sont des attributs spéciaux fournis par Vue. Elles appliquent un comportement réactif spécifique au DOM après rendu. Ici cela veut basiquement dire : « garde l’attribut title de cet élément à jour avec la propriété message de l’instance de Vue ».

# Rendu conditionnel et boucles

# Afficher ou masquer un élément à l'aide de la directive v-if

Il est assez simple de permuter la présence d’un élément :

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

var app3 = new Vue({
  el: "#app-3",
  data: {
    seen: true,
  },
});

# Répéter un élément à l'aide de la directive v-for

La directive v-for peut être utilisée pour afficher une liste d’éléments en provenance d’un tableau de données:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: "#app-4",
  data: {
    todos: [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Build something awesome" },
    ],
  },
});

Il existe une multitude de directives Vue. Cet article de Flavio Copes les présente en détail: https://flaviocopes.com/vue-directives/.

# Gérer les événements

Afin de permettre aux utilisateurs d’interagir avec l'application, il est possible d'utiliser la directive v-on pour attacher des écouteurs d’évènements qui invoquent des méthodes sur une instance Vue :

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: "#app-5",
  data: {
    message: "Hello Vue.js!",
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message
        .split("")
        .reverse()
        .join("");
    },
  },
});

Note: Cet exemple montre aussi comment définir une méthode sur une instance vue.

# Aller plus loin

Recommended links: