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…

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

Je vous ai dit dans le précédent article que vue.js est destiné à créer des interfaces interactives. Pour le moment je ne vous l’ai pas encore prouvé ! Dans cet article on va voir comment on gère les actions de l’utilisateur. La directive v-on Pour intercepter les événements survenant au niveau de la vue vue.js offre la directive v-on. Prenons un petit exemple pour introduire cette notion : <div id="tuto"> <a v-on:click="action">Cliquez ici !</a> </div> On a mis la directive v-on dans la balise a. Notez la syntaxe : on fait suivre le nom de la directive de deux points, du nom de l’événement, puis du nom d’une fonction. On…

Vue.js est une librairie pour créer facilement des interfaces web interactives. Dans cet article nous allons voir dans un premier temps comment l’installer et dans un deuxième temps les concepts clés ainsi qu’un petit exemple de réalisation pour illustrer. Il existe un site très bien fait auquel vous pouvez vous référer. Mais évidemment tout y est en anglais. Installation Pour installer vue.js c’est on ne peut plus simple puisque c’est juste une librairie Javascript. Vous avez donc deux possibilités… La charger et la mettre sur votre serveur Il suffit de récupérer la librairie en cliquant sur ce bouton sur le site : Au moment où j’écris ces lignes la version…