Vue.js

  • Vue.js

    Vue.js2 : on s’organise !

    Dans tout les exemples qu’on a vus dans les articles précédents on a placé le code JavaScript sur la page, on pourrait évidemment le mettre dans un fichier spécifique, ce qui ne changerait rien au principe. Tant qu’on a pas trop de code c’est parfait, simple et léger, mais quand le code s’accumule on aurait envie de pouvoir l’organiser plus efficacement. D’autre part on voudrait aussi des fois effectuer d’autres actions : utiliser Babel pour coder en ES6, utiliser Pug dans notre template, utiliser Sass pour notre style, minifier notre JavaScript en production… Le développement rapide du codage côté client a vu l’apparition d’une multitude d’outils : Grunt, Gulp, Browserify,…

  • Vue.js

    Vue.js 2 : les composants (2/2)

    J’ai commencé à présenter les composants dans le précédent article. On a vu qu’ils constituent un aspect important de Vue.js et qu’il sont faciles à créer. On a également vu qu’ils sont organisés hiérarchiquement et qu’on peut passer des informations (props) du parent à l’enfant. On va continuer notre exploration des composants dans le présent article en voyant la communication inverse : de l’enfant vers le parent. On va en profiter pour évoquer aussi quelques autres éléments. La communication entre composants Les composants étant isolés il faut prévoir une procédure pour qu’ils échangent des informations. On a vu les props dans le précédent article, c’est la communication descendante, du parent…

  • Vue.js

    Vue.js 2 : les composants (1/2)

    Vous connaissez peut-être les Web Components. C’est un nouveau standard qui permet d’enrichir le HTML de façon modulaire. En gros on peut créer une entité qui utilise des éléments HTML et des fonctionnalités propres, le tout facile à intégrer avec une simple balise personnalisée. On peut espérer que ce standard réduira la prolifération des widgets Javascript et engendrera une certaine homogénéité. Ce qui est certain c’est que le HTML est plutôt limité et ne propose que des éléments simples, on aimerait disposer d’info-bulles, de menus… Mais on est encore loin du but, vous pouvez lire cet excellent article qui résume la situation. On va voir dans cet article que vue.js…

  • Vue.js

    Vue.js 2 : accesseurs et mutateurs

    Dans les articles précédents nous avons vu comment stocker des valeurs dans le modèle et comment les lier à la vue. Dans cet article nous allons voir comment intervenir au passage lorsque nous stockons une donnée dans le modèle et lorsque nous l’extrayons. Accesseurs et mutateurs Ce vocabulaire, accesseurs (getters) et des mutateurs (setters), est issu de la programmation objet pour laquelle les propriétés sont en général privées ou au moins protégées et donc non directement accessibles. Il faut ainsi prévoir des méthodes pour accéder à ces propriétés et les modifier. On a vu que les propriétés d’un objet de vue.js ne sont pas privées ou protégées et nous y…

  • Vue.js

    Vue.js 2 : double liaison

    Contrairement à ce que le titre de cet article pourrait suggérer il ne s’agit pas de mœurs dissolues mais toujours de notre librairie Javascript. On a vu au cours des articles précédents qu’on peut facilement établir un lien entre le modèle et la vue et que, si le modèle change, alors la vue change aussi pour refléter ce changement. Maintenant nous allons nous intéresser à l’inverse, autrement dit si on change quelque chose dans la vue est-ce que ça va modifier le modèle ? Comme vue.js est censé justement établir une double liaison ça devrait pouvoir se faire. La directive v-model La directive v-model crée une double liaison entre le…

  • Vue.js

    Vue.js 2 : on se répète…

    On a vu qu’on pouvait établir une liaison entre une propriété dans le modèle et un élément dans la vue. Mais pour le moment on a utilisé des valeurs simples : nombre ou chaîne de caractères. Dans de multiple cas on aura besoin d’afficher des valeurs contenues dans un tableau ou un objet. Comment procéder dans ce cas ? Vue.js nous propose une directive puissante et simple à utiliser pour réaliser cela. La directive v-for La directive v-for permet de répéter l’affichage d’un élément du DOM en fonction des valeurs contenues dans un tableau du modèle. Un petit exemple vous fera comprendre cela rapidement. Voilà le HTML : <ul id="tuto">…