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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
FranckAbgrall
May 22, 2018
Programming
92
1
Share
Vue.js, retrouver le goût des choses simples
FranckAbgrall
May 22, 2018
More Decks by FranckAbgrall
See All by FranckAbgrall
Comment promouvoir son projet Open Source?
franckabgrall
0
640
Retours sur Vue.js Amasterdam
franckabgrall
0
190
Npm vs Yarn
franckabgrall
0
39
Other Decks in Programming
See All in Programming
Rethinking API Platform Filters
vinceamstoutz
0
5k
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
orgachem
PRO
8
4k
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
shinyorke
PRO
0
390
Linux Kernelの1文字のミスで 権限昇格ができた話
rqda
0
2.2k
Feature Toggle は捨てやすく使おう
gennei
0
400
AI活用のコスパを最大化する方法
ochtum
0
360
Ruby and LLM Ecosystem 2nd
koic
1
1.4k
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
tanishiking
0
140
ロボットのための工場に灯りは要らない
watany
12
3.3k
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
higaki_program
0
110
KagglerがMixSeekを触ってみた
morim
0
360
飯MCP
yusukebe
0
450
Featured
See All Featured
Design in an AI World
tapps
0
190
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.3k
Mobile First: as difficult as doing things right
swwweet
225
10k
Building an army of robots
kneath
306
46k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1k
Darren the Foodie - Storyboard
khoart
PRO
3
3.1k
エンジニアに許された特別な時間の終わり
watany
106
240k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
81
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
90
Utilizing Notion as your number one productivity tool
mfonobong
4
280
Raft: Consensus for Rubyists
vanstee
141
7.4k
What does AI have to do with Human Rights?
axbom
PRO
1
2.1k
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