Si vous êtes nouveau sur ce blog, n'hésitez pas à télécharger cet ebook gratuit en cliquant ici. Vous apprendrez ainsi à démarrer avec un environnement de développement prêt pour installer des packages NPM, builder, déployer et tester votre application Web.
Bonjour et merci de revenir régulièrement sur mon blog. Si vous ne l'avez pas déjà fait, n'hésitez pas à télécharger mon ebook gratuit en cliquant ici. Vous apprendrez ainsi à démarrer avec un environnement de développement prêt pour installer des packages NPM, builder, déployer et tester votre application Web.
Dans cet article, nous allors apprendre à créer un jeu snake en VueJs et nous découvrirons ainsi de nouvelles fonctionnalités :
Les Canvas HTML et le dessin javascript sur ces canvas
Les timers et intervalles pour répéter une méthode toutes les x millisecondes
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.
Affichage conditionnel dans React signifie qu’on peut afficher ou non certains contrôles HTML ou composants en fonction de conditions toujours côté React donc côté client sans devoir rafraîchir la totalité de la page. Comment faire ? C’est assez simple et c’est l’objet de cet article.
Le binding bidirectionnel en React permet de rafraichir un composant React afin qu’il affiche la valeur d’une variable au fur et à mesure que celle-ci est modifiée. Cela ne se fait pas simplement en modifiant la valeur de cette variable. En effet, on va devoir utiliser un STATE pour pouvoir gérer ce binding bidirectionnel dans notre 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 :
Comment créer un composant dans React, c’est ce que nous allons voir ici.
En effet, dans le précédent article : « Que faut-il installer pour commencer avec React ?« , vous avez découvert comment créer une application HelloWorld après avoir installé tout le nécessaire pour React.
A présent, rentrons dans le vif du sujet et créons un composant réutilisable.
Que faut-il installer pour commencer avec React ? Comment bien commencer et préparer sa machine pour pouvoir développer des applications web en utilisant React ? C’est à cette question que cet article va répondre.
Comme tout package NPM, il faut l’importer dans le fichier principal App.js:
import ....
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll);
...
On importe la librairie
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 :
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 :
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.
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