Vous n'êtes pas connecté. Connexion
|
|
Master 2 MBDS Madagascar annee 2017-2018De $1Table des matièresIntroductionDans ce cours nous allons voir les tendances du développement d'applications Web côté client: évolutions du développement JavaScript, des différentes APIs standard comme les Web Components, les principaux frameworks JavaScript, les environnements de développement, les évolutions du Web Mobile. Partie 1: état des lieux des technologies front-end, introduction a VueJS
DOM or not to DOM: todo list en pur JS, avec libs, avec VueJS et avec fetch APIEcriture en live coding d'une todo list:
MOOCs utiles
Partie 2: Suite VueJS1 - Creer des composants avec VueJSReprenez un des derniers exemples faits avec VueJS, ma gestion d'une todo list: http://jsbin.com/puduno/1/edit 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/fadeco/1/edit 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 2 - 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". 3 - Travail à faire : travailler avec Vue-cli
<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> 4 - Correction de l'exercice:
|
Powered by MindTouch Deki Open Source Edition v.8.08 |