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
27
Other Decks in Programming
See All in Programming
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
3.9k
Rubyと自由とAIと
yotii23
6
1.7k
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
0
120
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
300
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
140
AIプログラミング雑キャッチアップ
yuheinakasaka
17
4.2k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
自力でTTSモデルを作った話
zgock999
0
100
Better Code Design in PHP
afilina
0
170
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
110
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
How GitHub (no longer) Works
holman
314
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Code Review Best Practice
trishagee
67
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Unsuck your backbone
ammeep
669
57k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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