• Vue.js

    Vue.js2 : vue-resource (1/2)

    Dans les articles précédents on a vu l’essentiel de Vue.js mais cette librairie bénéficie de nombreuses ressources additonnelles. Vous en trouvez l’ensemble sur cette page avec en plus la références des tutoriels et autres. Dans cet article je vous propose de découvrir le plugin vue-resource qui simplifie la mise en place de requêtes Ajax. Pour l’occasion on va utiliser Laravel pour d’une part fournir l’application et d’autre paert présenter une API. Comme sujet je ne vais pas faire dans l’originalité puisque je vais me contenter de gérer la table par défaut des utilisateurs. Pour vous faciliter la vie et si vous n’avez pas le courage de suivre tout le processus…

  • Vue.js

    Vue.js2 : avec Laravel

    Comme ce blog est essentiellement consacré à Laravel il me faut évoquer l’utilisation de Vue.js 2 avec Laravel 5.3 puisque cette version a été enrichie de tout ce qu’il faut pour sceller ce mariage. J’en ai un peu parlé dans mon article sur les nouveautés de la version 5.3. je vais y revenir de façon plus précise maintenant en poursuivant l’exemple du panier dans le contexte de Laravel. Etat des lieux Dans l’article référencé ci-dessus j’avais présenté l’infrastructure en place lorsqu’on installe Laravel 5.3 : On a déjà : un composant vue.js 2 : Exemple.vue une application de base : app.js un fichier d’initialisation : bootstrap.js Avec Laravel on n’utilise…

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