Formation de base VueJs

Formation de base VueJs

Voici une formation de base VueJs mais déjà bien fournie. Voici ce que vous allez découvrir dans cette formation :

  • Une introduction à VueJs
  • Comment installer et configurer votre environnement de développement
  • Le binding dans VueJs
  • Les boucles et l’affichage conditionnel
  • Les composants
  • La validation des formulaires
  • La traduction de votre site
Lire la suite

Les filtres dans VueJs

Les filtres dans VueJs sont assez simples.

On parle ici de 2 types de filtres :

  • La fonction javascript filter qui permet de filtrer une liste de données
  • Les filtres VueJs qui sont en fait un filtre d’affichage : ils modifient ce que voit l’utilisateur sans modifier la donnée. Vous verrez exactement de quoi on parle dans la partie ci-dessous qui s’y rapporte.
Lire la suite

Passer des valeurs à un composant React

Pour passer des valeurs à un composant React, on va utiliser des propriétés. C’est là tout l’avantage des composants : on réutilise quelque chose de répétitif (les composants) en changeant uniquement quelques valeurs : les propriétés. Ainsi, passer des valeurs à un composant react vous permettra d’avoir quelque chose comme ceci :

<Article name="Casquette" price="20.00">Casquette noire XL</Article>
Lire la suite

Scroll infini

scroll infini

Le scroll infini comme dans facebook et bien d’autre sites est possible de manière très simple dans VueJs.

Pour se faire, il existe une librairie VueJs : vue-infinite-scroll.

Comment installer

Si vous avez suivi mon tuto sur l’installation d’un environnement de développement complet pour VueJs, vous avez déjà utilisé les packages NPM. Pour installer cette libraire, c’est justement une commande NPM qu’il faut taper :

npm install vue-infinite-scroll --save

Configurer et utiliser

Comme tout package NPM, il faut l’importer dans le fichier principal App.js:

import ....
import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll);
...
  1. On importe la librairie
  2. On l’utilise dans VueJs avec Vue.use…

Il ne reste plus qu’à utiliser la directive v-infinite-scroll-…

Voici comment on l’utilise : imaginons qu’on ait un élément DIV dans lequel on pourrait scroller à l’infini. A chaque scroll, on charge 10 lignes de données supplémentaires via une méthode qu’on appelle à chaque fois pour charger la suite :

Dans App.Vue:

<template>
  <div id="app" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="d in data" :key="d.name">
      {{ d.name }}
    </div>
  </div>
</template>

On peut voir ici qu’on a:

  • Un attribut v-infinite-scroll qui indique que lorsqu’on scroll au-delà de la limite des données affichées, on charge la suite via une méthode “loadMore()” -> voir plus bas pour le détail de cette méthode.
  • Un autre attribut infinite-scroll-disabled basé sur la variable “busy” qui se trouve dans la partie DATA de notre App.Vue. Ainsi, quand on active la variable busy à true, l’infinite scroll est temporairement arrêté le temps du chargement du reste des données.
  • Et encore un autre : infinite-scroll-distance qui indique la distance minimum entre le bas du dernier élément visible et le scroll utilisé par l’utilisateur avant de demander le chargement du reste des données.
  • On a ensuite une boucle v-for pour afficher toutes nos données qui sont dans la partie DATA de notre App.Vue (variable nommée aussi “data” sous forme d’un tableau de données).

Voici à quoi ressemble le code de la partie SCRIPT dans App.Vue :

<script>
export default {
  name: 'App',
  data() {
    return {
      busy: false,
      data: []
    }
  },
  methods: {
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        for (var i = 0; i < 10; i++) {
          this.data.push({ name: "Test" + i });
        }
        this.busy = false;
      }, 1000);
    }
  }
}
</script>

On peut donc voir ici:

  • La partie DATA qui contient bien notre variable BUSY et une données DATA qui n’est rien d’autre qu’un tableau de données pour afficher des données à l’infini remplie par notre fameuse méthode “loadMore”.
  • La partie METHODS qui contient notre fameuse méthode “loadMore” pour charger le reste des données : on charge en fait 10 lignes supplémentaires dans notre tableau de données “data” qui est affiché dans la partie HTML via notre boucle v-for. Cette méthode positionne également la variable “busy” à true avant de charger les données pour empêcher l’infinite scroll de demander à nouveau un chargement de données. Ensuite, on charge les données dans un tableau et on repositionne notre variable busy à false. Pour simuler une petite attente d’une seconde, on utilise setTimeout.

Simple et efficace

Comme vous pouvez le voir, vous pouvez donc faire un scroll infini en peu de temps et en peu de lignes de codes. N’hésitez pas à fouiller les librairies existantes et à en tester plusieurs lorsque vous recherchez quelque chose de particulier.

J’espère que cet article vous aura plu. N’hésitez pas à vous abonner à ce blog pour ne rien manquer, à commenter et aussi à partager cet article.

Je vous dis à très bientôt sur le blog “développement-web-facile.com“.

Menu contextuel personnalisé VueJs

menu contextuel vuejs

Vous avez souvent du voir des menus contextuels personnalisés qui apparaissent lorsque vous faites un clic droit par exemple dans vos messageries web.

Le clic droit étant exécuté côté client, il faut du code client pour modifier le comportement de ce clic, donc du javascript donc VueJs peut lui aussi gérer l’affichage d’un menu contextuel personnalisé.

Après quelques recherches et tests, le plus simple pour gérer cela, c’est d’utiliser une librairie VueJs : vue-simple-context-menu me semble la librairie la plus simple à utiliser et elle fait très bien le job. Voici comment cela fonctionne

Lire la suite

Les événements dans VueJs : s’y abonner et en déclencher

événements VueJs

Un événement est une chose qui se produit et dont on peut être mis au courant en s’y abonnant.

Exemple : l’événement “click” sur un contrôle de type “button” par exemple: en s’y abonnant, on sera prévenu que l’utilisateur a cliqué sur le bouton en question. Pour se faire, on va lier une fonction à cet événement et c’est cette fonction qui sera exécutée lors du clique sur le bouton. Ainsi, on peut effectuer une action sur base d’un événement.

Mais on peut également créer un événement sur un composant et le déclencher quand bon nous semble selon une action ou condition particulière. Ainsi, celui qui utilise notre composant pourra lui-aussi s’abonner à cet événement.

Lire la suite