Vous n'êtes pas connecté. Connexion
|
|
Master 2 INTENSE: Frameworks JavaScript et Server-Side JavaScript BD NoSQL Cloud etc.De $1Table des matièresIntroduction
DOM or not to DOM ?Ecriture en live coding d'un gestionnaire de todos :Nous allons comparer plusieurs versions:
A propos de REST:
Remarque : on peu faire des requêtes REST avec XhR2, fetch API(pour les curieux : quelques mots sur GraphQLet Appolo) On peut aujourd'hui gérer la progression des uploads et downloads avec fetch et l'API des streams (voir https://streams.spec.whatwg.org/demos/) Suite de l'étude de VueJSJ'ai rajouté eux exemples vus la semaine dernière, un exemple qui charge des données par fetch/ajax. Créer des composants avec VueJSReprenez un des derniers exemples faits avec VueJS, ma gestion d'une todo list: http://jsbin.com/haguven/edit?html,console,output Dans cet exemple, on ne peut pas instancier plusieurs "Vues". Mais on peut associer la VueJS à un "faux" élement custom HTML, comme ici: http://jsbin.com/haguven/edit?html,js,console,output Exercice à faire: inspirez-vous de cet exemple pour gérer une liste de hobbies, mais avec les contraintes indiquées dans les commentaires HTML de ce squelette d'application: http://jsbin.com/guwetoy/edit?html,js,output Correction (ne regarder qu'après avoir vraiment essayé, ou vu la correction en live conding): http://jsbin.com/guwetoy/1/edit Développer en mode "CLI" avec un environnement de build/testy
Cette fois-ci, pour terminer l'introduction à VueJS, le plus élégant/simple des trois gros frameworks "industriels" modernes (React, VueJS, Angular), nous allons regarder comment on peut développer avec "un environnement de développement", qu'on appelle "CLI" pour "Command Line Environment". Les trois frameworks cités, mais aussi Polymer dont on vient de parler, proposent un environnement "CLI". Travail à faire :
<template> <div id="app"> Hello {{msg}} <div> <router-link to="/">Home</router-link> <router-link to="/blog">Blog</router-link> <router-link to="/compte">compte</router-link> </div> <router-view></router-view> <app-user></app-user> <p>Ceci est un test</p> </div> </template> Correction de l'exercice: VueJSExoCli.zip, faire "npm install" et "npm run dev" une fois dezippé.
|
Powered by MindTouch Deki Open Source Edition v.8.08 |