Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js, retrouver le goût des choses simples
Search
FranckAbgrall
May 22, 2018
Programming
1
76
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
450
Retours sur Vue.js Amasterdam
franckabgrall
0
160
Npm vs Yarn
franckabgrall
0
24
Other Decks in Programming
See All in Programming
decksh - a little language for decks
ajstarks
4
18k
「プログラマーのためのCPU入門」は入り口として丁度よい!
forrep
25
22k
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.2k
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
830
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
410
私がエッジを使う理由
chimame
9
3.6k
Next.js で SPA を構築する際の辛み
hayatow
0
220
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
210
使えるマークダウンライブラリを探した結果 RailsアプリケーションからRustを使うことになった話
fursich
0
150
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
190
TerraformをやめてCDKでReStartしたあと、 CDKをやめてCDK for TerraformでReStartした話
tmiura0203
0
770
架空のコンペ_スクワットフォーム判別コンペの解法
cpptake
0
430
Featured
See All Featured
Optimizing for Happiness
mojombo
369
69k
Adopting Sorbet at Scale
ufuk
66
8.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
How GitHub (no longer) Works
holman
301
140k
Building an army of robots
kneath
300
41k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
930
RailsConf 2023
tenderlove
0
500
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Six Lessons from altMBA
skipperchong
19
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
A Tale of Four Properties
chriscoyier
150
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
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