Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue.js, retrouver le goût des choses simples
FranckAbgrall
May 22, 2018
Programming
0
57
Vue.js, retrouver le goût des choses simples
FranckAbgrall
May 22, 2018
Tweet
Share
More Decks by FranckAbgrall
See All by FranckAbgrall
Comment promouvoir son projet Open Source?
franckabgrall
0
280
Retours sur Vue.js Amasterdam
franckabgrall
0
120
Npm vs Yarn
franckabgrall
0
20
Other Decks in Programming
See All in Programming
Jetpack Compose, 어디까지 알고 있을까?
jisungbin
0
110
Overview of The Modern Data Stack / モダンデータスタック概論
satoshihirose
6
3.3k
IE Graduation Certificate
jxck
6
4.8k
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.7k
engineer
spacemarket
0
810
Gitlab CIでMRを自動生成する
forcia_dev_pr
0
110
ドメインモデル方式のクラス設計 座談会
masuda220
PRO
3
1k
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
240
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
dwchiang
0
140
Vite でお手軽 Vue.js の環境構築
azuki
2
180
What's new in Jetpack / I/O Extended Japan 2022
star_zero
1
180
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
0
780
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
272
32k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
Three Pipe Problems
jasonvnalue
89
8.7k
Support Driven Design
roundedbygravity
86
8.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
In The Pink: A Labor of Love
frogandcode
131
21k
GitHub's CSS Performance
jonrohan
1020
420k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Done Done
chrislema
174
14k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Transcript
vue.js “Retrouver le goût des choses simples”
FRANCK ABGRALL Consultant & Formateur Zenika Nantes GREGORY BEVAN Consultant
& Formateur Zenika Nantes vue.js
vue.js vue.js Evan Popularité ≈ 90000 sur github
vue.js Alternatives ...
Vue.js en 3 mots ... SIMPLE PERFORMANT MINIMALISTE vue.js
Étape 1 Initialiser un projet Vue.js vue.js
Vue-cli vue.js
Étape 2 Créer un composant vue.js
Structure d’une application js en 2018 Navbar Sidebar List Item
Item Item Input / Output vue.js
Architecture orientée composant Composition “classique” : - 1 fichier html
(template) - 1 fichier js (controller) - 1 fichier css/scss... (style) Single File Component : - 1 fichier … (.vue) vue.js
vue.js Template (HTML) Controller (Javascript) Style (CSS)
Étape 3 Créer une route vue.js
Vue-router https://localhost:4200/map vue.js
Vue-router https://localhost:4200/stats vue.js
Étape 4 Naviguer entre les routes vue.js
vue.js
Étape 5 Préparer l'affichage d'une série vue.js
Étape 6 Récupérer les données vue.js
Client HTTP Service Http Home Tvmaze API Serie Serie Serie
vue.js
Cycle de vie d’un composant Cycle de vie beforeCreated created
beforeMount mounted beforeUpdate updated beforeDestroy destroyed vue.js
Étape 7 Afficher les séries vue.js
vue.js
vue.js
vue.js Passing props
Créer dynamiquement à partir d’une liste vue.js
vue.js
vue.js
Parent Component Child Component
Parent Component Child Component
Parent Component Child Component
Parent Component Child Component
Étape 8 Gestion des favoris vue.js
Les événements natifs • click • focus • ... vue.js
Les événements personnalisés Home Serie Serie Événement émis avec de
la donnée vue.js
vue.js Parent Child
Étape 9 Afficher en fonction d’un état vue.js
Computed property vue.js
Computed property vue.js
Computed property vue.js
Computed property vue.js
Computed property vue.js
Class binding vue.js
Étape 10 Rechercher une série vue.js
v-model data () { return { name: ‘’ } }
<template> <div> <input v-model=”name” /> </div> </template> “Controller” Template Two way data binding vue.js
This is the end... ...but the beginning of your Vue.js
experience vue.js
L'objet data d'un composant vue.js Two way data binding