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
81
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
570
Retours sur Vue.js Amasterdam
franckabgrall
0
170
Npm vs Yarn
franckabgrall
0
26
Other Decks in Programming
See All in Programming
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
640
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
950
Jakarta EE meets AI
ivargrimstad
0
180
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
260
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
240
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
200
DROBEの生成AI活用事例 with AWS
ippey
0
140
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
1
330
sappoRo.R #12 初心者セッション
kosugitti
0
270
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
Software Architecture
hschwentner
6
2.1k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Visualization
eitanlees
146
15k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
A Tale of Four Properties
chriscoyier
158
23k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Faster Mobile Websites
deanohume
306
31k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Product Roadmaps are Hard
iamctodd
PRO
50
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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