Prend en compte VueJs 2+

• VueJS 2 API
• Getting Started

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.

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;
    }
  }
});

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

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

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>

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.

• Exemple

<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) {
    ...

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

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

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-on:keyup=alertMe: va s'exécuter sur n'importe quelle touche (up).
• v-on:keyup.enter=alertMe: va s'exécuter quand Enter a été relâché.
• v-on:keyup.enter.space=alertMe: va s'exécuter quand Enter ou Space ont été relâchés.

Two-way data-binding.

• Exemple

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

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.

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

• Exemple

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.

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

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!';
        }
    }
});

• Événements

Site officiel

npm install -g vue-cli

• simple
• webpack-simple
• webpack
• browserify / browserify-simple

Utiliser, par exemple, la commande :

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

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 }}.'
});

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.

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: ''
        };
    }
}

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>

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.

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.

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);
        }
    }
}

Mettre .prevent sur le bouton de soumission:

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

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)
});

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

Vue.directive('highlight');

• bind(el, binding, vnode), quand la directive est attachée
• inserted(el, binding, vnode), quand la directive est insérée dans le node parent
• update(el, binding, vnode, oldVnode), Quand le component est mis à jour (sans enfants)
• componentUpdated(el, binding, vnode, oldVnode), Quand le component est mis à jour (avec enfants)
• unbind(el, binding, vnode), quand la directive est enlevée

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 -->

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);
    }
});

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

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

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.

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.

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);
            });
        }
    }
}

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