Table des matières

VueJS

Prend en compte VueJs 2+

Démarrer un projet VueJS2

  1. Se mettre dans le répertoire parent du projet (ne pas créer le répertoire du projet).
  2. $ vue init webpack-simple [nom-du-projet]
  3. npm install
  4. npm run dev

Voir vue-cli pour d'autres options.

Directives built-in

v-bind

Sert à associer (binder) des données à des attributs HTML. Au lieu de faire <a href="{{ link }}">Google</a> ce qui ne fonctionne pas, on fait:

<p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p>
new Vue({
  el: '#app',
  data: {
    title: 'Hello World!',
    link: 'http://google.com'
  },
  methods: {
    sayHello: function() {
      this.title = 'Hello!';
      return this.title;
    }
  }
});

Shorthand

On peut faire le v-bind plus succinctement avec seulement le :, par exemple:

<a :href="link">Google</a>

v-once

La directive v-once garde la valeur initiale dans le rendu. Si on utilise une certaine variable qui sera changée éventuellement, mais qu'on veut ne pas la mettre à jour:

<h1 v-once>{{ title }}</h1>

v-html

Par défaut VueJS retourne le contenu d'une variable contenant du HTML en chaîne escaped. Pour faire le rendu du code HTML contenu dans une variable, on peut utiliser v-html. Attention, ceci peut causer des problèmes de sécurité tel que Cross-site Scripting Attack.

Écouter des événements avec v-on

<button v-on:click="increase">Click me</button>
new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    increase: function() {
      this.counter++;
    }
  }
});

Pour passer des arguments, on peut les ajouter au v-on:

<button v-on:click="increase(step, $event)">Click me</button>

Noter que $event a un signe de dollar, ce qui permet aussi de passer l'objet de l'événement à la fonction.

    ...
    increase: function(step, event) {
    ...

Shorthand

On peut faire le v-on plus succinctement avec @, par exemple:

<button @click="increase">Click me</button>

Event modifier

Dans l'exemple ci-dessous, on voit v-on:mousemove.stop, le .stop est le modifier qui arrête la propagation de l'événement vers l'élément parent. C'est comme faire un event.stopPropagation().

<p v-on:mousemove="updateCoordinates">
  Coordinates: {{ x }} / {{ y }}
  - <span v-on:mousemove.stop="">DEAD SPOT</span>
</p>

D'autres exemples:

v-model

Two-way data-binding.

Le modifier .lazy (v-model.lazy) permet de faire le changement de données une fois que l'élément du formulaire n'a plus le focus.

.number

Dynamic Styling

On utilise :class pour se faire. On donne le nom du sélecteur (key) et on assigne quelque chose qui évalue à true/false (value) qui utilise ou non la classe CSS.

<div class="demo" @click="attachRed = !attachRed" :class="{red: attachedRed}"></div>

On peut aussi utiliser une variable des données qui contient le sélecteur. Ceci peut être utilisé dans un array pour avoir plusieurs styles différents. Voici un exemple JSFiddle.

Affichage conditionnel

On peut utiliser l'affichage avec v-if, v-else, v-else-if.

On peut aussi utiliser v-show.

La différence avec v-if et v-show est que le premier enlève les éléments du DOM, tandis que v-show le cache.

Listes

On peut utiliser v-for.

<li v-for="(ingredient, i) in ingredients" :key="ingredient">{{ ingredient }} ({{ i }})</li>
new Vue({
  el: '#app',
  data: {
    ingredients: ['meat', 'fruit', 'cookies']
  }
});

Exemple JSFiddle

Instance Vue

Rien n'empêche de créer plusieurs instances de Vue sur différents éléments HTML de la même page. Il suffit d'utiliser la propriété el avec différents sélecteurs.

Si on assigne les différentes instances de Vue à différentes variables, il sera possible d'accéder à ces instances de l'extérieur.

var vm1 = new Vue({
    el: '#app1',
    data: {
        title: 'The VueJS Instance'
    }
});
 
var vm2 = new Vue({
    el: '#app2',
    methods: {
        onChange: function() {
            vm1.title = 'Changed!';
        }
    }
});

computed

Cycle de vie

Vue CLI

Site officiel

npm install -g vue-cli

Templates

Utiliser, par exemple, la commande :

$ vue init webpack-simple [nom-du-projet]

Components

Components (Documentation officielle)

On utilise Vue.component() pour se faire. Noter que data est une fonction qui retourne un objet avec les données.

Vue.component('my-cmp', {
    data: function() {
        return {
            status: 'OK'
        }
    },
    template: '<p>Component status: {{ status }}.'
});

Communication

Utilisation de props:

Dans le component enfant, on peut ajouter une valeur props:

export default {
    props: ['myName']
}

dans le component parent:

<component-enfant my-name="unevaleur"></component-enfant>

On peut utiliser le v-bind, ou le : (ex: :my-name=“variable”) pour passer la valeur d'une variable.

Forms

Utilisation de v-model :

<div class="form-group">
    <label for="email">Email</label>
    <input type="text" id="email" class="form-control" v-model="email">
</div>

Le v-model est équivalent à :

<input type="text" id="email" class="form-control" :value="userDetails.email" @input="userDetails.email = $event.target.value">
export default {
    data () {
        return {
            email: ''
        };
    }
}

TextArea

L'interpolation ne fonctionne pas dans le TextArea, donc <textarea>value</textarea> ne fonctionne pas.

Line breaks: Avec v-model les linebreaks sont gardés, mais si on fait l'interpolation de la valeur, il est possible que les linesbreaks ne soient pas présents. Si par exemple on utilise <p>, il faut:

<textarea v-model="message">/textarea>
<p style="white-space: pre;">{{ message }}</p>

Checkbox

Pour un groupe de checkbox, on peut utiliser le même modèle. VueJS va le détecter et va fusionner les valeurs des checkbox qui sont cochés dans un array.

Radio buttons

Même chose que pour les checkbox, on utilise la même variable de v-model pour un groupe de radiobuttons.

<input type="radio" id="male" value="Male" v-model="gender"> Male
<input type="radio" id="female" value="Female" v-model="gender"> Female
<select id="priority" class="form-control" v-model="selectedPriority">
    <option v-for="prority in priorities" :selected="priority === 'Medium'">{{ priority }}
</select>

La partie :selected sert à mettre une valeur par défaut. Si le modèle a déjà une valeur d'initialisée, celle-ci prendra le dessus sur le :selected et sera donc pas nécessaire.

v-model sur un component

Si on veut utiliser un v-model sur un component, on peut faire par exemple:

  <switch v-model="isOn" />

Il faut que le $emit du component soit input de cette façon:

<div id="on" @click="switched(true)" :class="{active: value}">On</div>
<div id="on" @click="switched(false)" :class="{active: !value}">Off</div>
export default {
    props: ['value'],
    methods: {
        switched(isOn) {
            this.$emit('input', isOn);
        }
    }
}

Soumettre le formulaire

Mettre .prevent sur le bouton de soumission:

<button class="btn btn-primary" @click.prevent="submit">Soumettre</button>

Vue-Resource

Installation

$ npm install vue-resource --save

Dans le fichier main.js:

import Vue from 'vue';
import App from './App.vue';
import VueResource from 'vue-resource';
 
Vue.use(VueResource);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

Créer et utiliser des directives

Dans le fichier main.js, on peut enregistrer des directives globalement:

Vue.directive('highlight');

Hooks

Créer une directive

Utilisation d'une directive avec un argument.

Vue.directive('highlight', {
    bind(el, binding, vnode) {
        if (binding.arg === 'background') {
            el.style.backgroundColor = binding.value;
        } else {
            el.style.color = binding.value;
        }
    }
});
<p v-highlight:background="'red'">Color this</p>  <!-- Aura un fond rouge -->
<p v-highlight="'red'">Color this</p>  <!-- Aura un texte rouge -->

Modifiers

Dans le tableau binding.modifiers on a les modifiers. Si on veut un modifier delayed:

<p v-highlight:background.delayed="'red'">Color this</p>
Vue.directive('highlight', {
    bind(el, binding, vnode) {
        let delay = 0;
 
        if (binding.modifiers['delayed']) {
            delay = 3000;
        }
 
        setTimeout(() => {
            if (binding.arg === 'background') {
                el.style.backgroundColor = binding.value;
            } else {
                el.style.color = binding.value;
            }
        }, delay);
    }
});

Directive locale

Dans le export default {}, on peut spécifier directives.

export default {
    directives: {
        'local-highlight': {
            bind(el, binding, vnode) {
                // code
            }
        }
    }
}

Passer des valeurs complexes

On peut faire ceci:

<p v-local-highlight:background.delayed.blink="{mainColor: 'red', secondColor: 'blue', delay: 500}" >Color this</p>

Dans le code, après on peut référer à ces valeurs via binding.value.mainColor, binding.value.secondColor ou binding.value.delay.

Filtres et mixins

Les filtres sont utilisés pour transformer les données affichées.

Globalement on fait:

Vue.filter('to-lowercase', (value) => {
    return value.toLowerCase();
});

Localement:

export default {
    data() {
        return {
            text: 'Hello World!'
        }
    },
    filters: {
        toUppercase(value) {
            return value.toUpperCase();
        }
    }
 
}
<p>{{ text | toUppercase | to-lowercase }}</p>

Pour des raisons de performance, il est parfois mieux d'utiliser des propriétés calculées.

Propriétés calculées

Les propriétés calculées (computed properties) servent souvent à obtenir une autre propriété (d'un composant) sans affecter la vraie propriété.

Par exemple, si on a une liste de fruits dans un tableau:

export default {
    data() {
        return {
            fruits: ['Apple', 'Banana', 'Mango', 'Melon'],
            filterText: ''
        }
    }
}

On peut ajouter une propriété calculée:

export default {
    // ..
    computed: {
        filteredFruits() {
            return this.fruits.filter((fruit) => {
              return fruit.match(this.filterText);
            });
        }
    }
}

Mixins

Les mixins sont du code qu'on voudrait réutiliser à plusieurs endroits.