Ook!, un langage de programmation... primitif.

Découverte de Vue.js – Partie 1

Découverte de Vue.js – Partie 1

Vue.js (prononcez Viou) est un des frameworks Javascript en vue (ahah) du moment. Au milieu des Ember.js, Polymer, React.js et cie, Vue.js tire sa force de sa simplicité de mise en oeuvre, de sa documentation très claire, de la reprise de concepts bien connus comme les directives d’AngularJS ou encore les Mustache {{ }} ainsi que de son intégration fluide avec des bundlers tel webpack.

Vue.js est fourni avec un CLI qui facilite la mise en place de projet single-page à l’image de Polymer ou Ember.

Je vous propose de découvrir le framework via les quelques exemples glanés ça et là sur le site officiel https://vuejs.org/

Retrouvez le code source de ce projet ici : https://github.com/alexandrelanglais/vuejs-showcase

Installation

Vue s’installe aisément grace à npm :

npm install vue

On peut aussi utiliser un CDN mis à jour dès lors que le paquet npm change :

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

Ou encore vous pouvez télécharger le fichier Vue.js directement sur le site de l’éditeur.

Première application Vue

Vue.js est très abordable dans le sens où il permet de faire un rendu des données très déclaratif.

On pourrait commencer en générant une application grace au CLI mais même si celui-ci est très efficace car il rajoute la gestion des tests et du déploiement via webpack, ce n’est pas le plus approprié pour une découverte purement axée sur Vue.js.

On va donc commencer par une page HTML de base comme ceci :

<script src="node_modules/vue/dist/vue.js"></script>

<script>
new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  })
</script>

<div id="app">
  <p>{{ message }}</p>
</div>

Pour le serveur, on va utiliser tomcat et le plugin tomcat-maven-plugin pour lancer notre serveur.

Le pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>fr.demandeatonton</groupId>
  <artifactId>vue-showcase</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>Vue.js Showcase</name>
  <description>Simple app to showcase Vue.js capabilities</description>

  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.1</version>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.3-SNAPSHOT</version>
      </plugin>
    </plugins>
  </build>
  <packaging>war</packaging>
</project>

On va se placer dans le répertoire webapp de l’application et installer Vue.js avec npm :

npm install vue --save

L’arborescence du projet ressemble à cela :

Testons le résultat :

Ah ok, bon ben pas comme ça alors 🙂 l’ordre est important ! Il faut déclarer le <div> avant le script :

<script src="node_modules/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  })
</script>

On re-teste :

Parfait ! Entrons un peu plus dans le vif du sujet. Voyons à présent un exemple d’attribute-binding.

Attribute binding

L’attribute binding se fait via l’instruction v-bind :

<div id="app-2">
  <span v-bind:title="message">
  Passe ta souris ici !
  </span>
</div>

<script>
new Vue({
    el: '#app-2',
    data: {
      message: 'Tu as chargé cette page le ' + new Date()
    }
  })
</script>

Le résultat :

Ici on voit le fonctionnement de l’attribut v-bind : on indique à Vue de charger l’attribut title du <span> avec le contenu de message.

Essayons avec l’attribut style :

<div id="app-2">
  <span v-bind:title="message" v-bind:style="style">
  Passe ta souris ici !
  </span>
</div>

<script>
new Vue({
    el: '#app-2',
    data: {
      message: 'Tu as chargé cette page le ' + new Date(),
      style: 'background-color:red; color:purple'
    }
  })
</script>

Le résultat :

Vous voyez le principe 🙂

Conditions et boucles

Voyons comment sont gérées les conditions et les boucles dans Vue : commençons par v-if

<div id="app-3">
  <p v-if="seen">Tu me vois</p>
  <input type="checkbox" v-model="showMe" checked />
</div>

<script>
  var app3 = new Vue({
    el : '#app-3',
    data : {
      showMe : true,
      seen : true
    },
    watch : {
      showMe : function(value) {
        this.seen = value;
      }
    }
  })
</script>

Ligne 2, le <p v-if= »seen » indique que l’élément p ne sera affiché que si la variable seen est à true.

seen est définie dans les data de app3. Ici il est initialisé à true, mais j’ai rajouté une checkbox pour changer cette valeur à l’aide d’un watcher. La checkbox d’id showMe est « watchée » pour mettre à jour la valeur de seen, qui lui-même va être affiché ou non si la checkbox est cochée.


Voyons maintenant le for :

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

<script>
  var app4 = new Vue({
    el : '#app-4',
    data : {
      todos : [ {
        text : 'Apprendre JavaScript'
      }, {
        text : 'Apprendre Vue'
      }, {
        text : 'Sortir de chez moi'
      } ]
    }
  })
</script>

Le résultat :

La commande v-for permet de boucler sur le champs de données todos de la Vue app4.  Pour chaque todo, on affiche le texte dans un <li>.

Fin de la partie 1

Comme vous pouvez le voir, Vue.js est plutôt facile à mettre en place et à prendre en main ! On explorera davantage ce framework dans un futur article.

Stay tuned !

Laisser un commentaire