Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Vue, j’avais pas vu !
Bruno Bonnin - @_bruno_b_
#codeurs2016
Kissuije ?
Bruno Bonnin @_bruno_b_ - 24 novembre
Architecte logiciel / Développeur @MyScript
#Java #JavaScript #Python
#Mo...
MyScript
Leader de la reconnaissance d’
écriture
Démo:
http://webdemo.myscript.com/
Join us:
http://myscript.com/about/joi...
Java
Server
Pages
Un passé sombre...
Heureusement…
Et maintenant, que vais-je faireeeeeeuh ?
Orienté composants
Dédié à la création d’interfaces
Web interactives
Performant
Très facile à
apprendre
Vue.js en quelques...
npm install vue-cli -g
vue init webpack mon-projet
C’est parti, on l’installe...
<script src="https://unpkg.com/vue/dist/v...
… et on code !
<div id="app">
Bonjour {{ name }} !
</div>
var vm = new Vue({
el: '#app',
data: confdata
})
var confdata = ...
Démo
(merci de votre tolérance concernant le style…)
Commençons par ...
Data binding, interpolation,
properties
<span>{{ name | capitalize }}</span>
Interpolation
<h1>Bonjour {{ name }} !</h1>
{{ ... }}
<h1 v-once>Bonjour {{ name }} !...
Interpolation sur les attributs
v-bind
<a v-bind:href="search_url"> Search </a>
<div v-bind:id=" ’id’ + nb"> </div>
<span ...
<div>{{ speakers.sort().join(‘, ‘) }}</div>
<script>
new Vue({
el: '#app',
data: {
speakers: [ 'Grincheux', ‘Prof’]
}
})
<...
Watched properties
new Vue({
data: {
firstname: 'Archibald',
lastname: 'Haddock',
fullname: ''
},
watch: {
firstname (val)...
Démo
(juste pour voir les properties)
Continuons avec …
Les directives v-*
Directives
Attributs commençant par v-
Avec un argument
Avec des modificateurs
<input v-model="name">
<a v-bind:href="sear...
Two-way binding
<span>Hello {{ name }} !</span>
<input v-model="name">
<script>
new Vue({
el: '#app',
data: {
name: 'world...
Evénements DOM
<h3> Talk: {{ title }} </h3>
<button v-on:click="like"> J’aime </button>
<script>
new Vue({
data: {
title: ...
Conditional rendering
<h3> Talk: {{ title }} </h3>
<div v-if="like"> Vous aimez ça ! </div>
<script>
new Vue({
data: {
tit...
List rendering
<div v-for="talk in talks">
<h3>{{ talk.title }}</h3>
</div>
<script>
new Vue({
data: {
talks: [
{ "title":...
Custom directive
<button v-bigbutton:success> Yes ! </button>
v- ...
<script>
Vue.directive({ ‘bigbutton’, {
bind (el, bin...
Démo
(cette fois, le style est top !)
Transition
<transition name="fade">
<p v-if="showTheBook">
<img src="..." />
</p>
</transition>
<style>
.fade-enter-active...
Poursuivons avec …
La classe Vue
Une instance "Vue"
new Vue({
el: '#app',
template: '',
data: { … },
computed: { ... },
watch: { ... },
methods: { ... },
f...
Cycle de vie
Source: https://vuejs.org/v2/guide/instance.html
Et maintenant...
Les composants
Les composants
Extension des éléments HTML de base
pour construire des éléments réutilisable
<talks>
...
...
...
...
</tal...
Les composants
<template id="talks-template">
<div v-for='talk in talks'>
{{ talk.title }}
</div>
</template>
new Vue({
el...
Le tout en un
=.CSS.HTML .JS .VUE
++
Composants: .vue
<div class="talks">
<div class="talk" v-for="talk in talks">
<h3 class="talk-title">{{ talk.titre }}</h3>...
Composants: .vue
<template>
<div class="talks">
<div class="talk" v-for="talk in talks">
<h3 class="talk-title">{{ talk.ti...
Démo
(si ça marche, tournée générale...)
Vue-router
Et y a quoi d’autres ?
Vue-router
<div id=”#app”>
<router-link to=”/talks” tag=”button”> Talks </router-link>
<router-link to=”/speakers” tag=”bu...
Vue-router
const routes = [ {
path: '/talks',
name: 'talks',
component: require('./TalkList.vue')
}, {
path: '/talk/:id',
...
Démo
(grosse sérénité sur cette démo...)
Vuex
Et y a quoi d’autres ?
Vuex
Source: https://vuex.vuejs.org
Gestion centralisé de
state pour tous les
composants d’une
application
Inspiré par Flux
Création du store
const store = new Vuex.Store({
mutations: {
setTalks (state, talks) {
state.talks = talks
}
},
state: {
...
Utilisation du store
import { mapState } from 'vuex'
new Vue({
store : store,
created () {
this.$store.dispatch('fetchTalk...
Démo
(et après, c’est fini !!!)
Vue-devtools
Et y a quoi d’autres ?
Vue-devtools - Components
Vue-devtools - Vuex
https://github.com/vuejs/awesome-vue
Et y a quoi d’autres ?
En conclusion...
Après 2 ans d’existence, la
communauté grandit vite
● Focus sur la simplicité
● Orienté composant
● Monté...
Merci !
@_bruno_b_
https://github.com/bbonnin/codeursenseine2016
Vue, j’avais pas vu !
Vue, j’avais pas vu !
Prochain SlideShare
Chargement dans…5
×

sur

Vue, j’avais pas vu ! Slide 1 Vue, j’avais pas vu ! Slide 2 Vue, j’avais pas vu ! Slide 3 Vue, j’avais pas vu ! Slide 4 Vue, j’avais pas vu ! Slide 5 Vue, j’avais pas vu ! Slide 6 Vue, j’avais pas vu ! Slide 7 Vue, j’avais pas vu ! Slide 8 Vue, j’avais pas vu ! Slide 9 Vue, j’avais pas vu ! Slide 10 Vue, j’avais pas vu ! Slide 11 Vue, j’avais pas vu ! Slide 12 Vue, j’avais pas vu ! Slide 13 Vue, j’avais pas vu ! Slide 14 Vue, j’avais pas vu ! Slide 15 Vue, j’avais pas vu ! Slide 16 Vue, j’avais pas vu ! Slide 17 Vue, j’avais pas vu ! Slide 18 Vue, j’avais pas vu ! Slide 19 Vue, j’avais pas vu ! Slide 20 Vue, j’avais pas vu ! Slide 21 Vue, j’avais pas vu ! Slide 22 Vue, j’avais pas vu ! Slide 23 Vue, j’avais pas vu ! Slide 24 Vue, j’avais pas vu ! Slide 25 Vue, j’avais pas vu ! Slide 26 Vue, j’avais pas vu ! Slide 27 Vue, j’avais pas vu ! Slide 28 Vue, j’avais pas vu ! Slide 29 Vue, j’avais pas vu ! Slide 30 Vue, j’avais pas vu ! Slide 31 Vue, j’avais pas vu ! Slide 32 Vue, j’avais pas vu ! Slide 33 Vue, j’avais pas vu ! Slide 34 Vue, j’avais pas vu ! Slide 35 Vue, j’avais pas vu ! Slide 36 Vue, j’avais pas vu ! Slide 37 Vue, j’avais pas vu ! Slide 38 Vue, j’avais pas vu ! Slide 39 Vue, j’avais pas vu ! Slide 40 Vue, j’avais pas vu ! Slide 41 Vue, j’avais pas vu ! Slide 42 Vue, j’avais pas vu ! Slide 43 Vue, j’avais pas vu ! Slide 44 Vue, j’avais pas vu ! Slide 45 Vue, j’avais pas vu ! Slide 46 Vue, j’avais pas vu ! Slide 47 Vue, j’avais pas vu ! Slide 48 Vue, j’avais pas vu ! Slide 49 Vue, j’avais pas vu ! Slide 50 Vue, j’avais pas vu ! Slide 51 Vue, j’avais pas vu ! Slide 52
Prochain SlideShare
Budowa roweru
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

2 j’aime

Partager

Télécharger pour lire hors ligne

Vue, j’avais pas vu !

Télécharger pour lire hors ligne

Présentation de Vue.js faite lors de Codeurs en seine 2016.

Vue, j’avais pas vu !

  1. 1. Vue, j’avais pas vu ! Bruno Bonnin - @_bruno_b_ #codeurs2016
  2. 2. Kissuije ? Bruno Bonnin @_bruno_b_ - 24 novembre Architecte logiciel / Développeur @MyScript #Java #JavaScript #Python #MongoDB #Elastisearch # NoSQL #Hadoop #Spark #Storm #BigData #HTML5 #AngularJS #VueJS #NodeJS De plus en plus !De moins en moins...
  3. 3. MyScript Leader de la reconnaissance d’ écriture Démo: http://webdemo.myscript.com/ Join us: http://myscript.com/about/join-us/
  4. 4. Java Server Pages Un passé sombre...
  5. 5. Heureusement…
  6. 6. Et maintenant, que vais-je faireeeeeeuh ?
  7. 7. Orienté composants Dédié à la création d’interfaces Web interactives Performant Très facile à apprendre Vue.js en quelques mots... Focus sur la couche View Flexible
  8. 8. npm install vue-cli -g vue init webpack mon-projet C’est parti, on l’installe... <script src="https://unpkg.com/vue/dist/vue.js">Le plus simple Recommandé npm install vue Encore mieux
  9. 9. … et on code ! <div id="app"> Bonjour {{ name }} ! </div> var vm = new Vue({ el: '#app', data: confdata }) var confdata = { name: 'Codeurs en Seine' } Model ViewViewModel confdata.name = 'BreizhCamp' Rien de plus à faire ! ?
  10. 10. Démo (merci de votre tolérance concernant le style…)
  11. 11. Commençons par ... Data binding, interpolation, properties
  12. 12. <span>{{ name | capitalize }}</span> Interpolation <h1>Bonjour {{ name }} !</h1> {{ ... }} <h1 v-once>Bonjour {{ name }} !</h1> <span>{{ name.toLowerCase() }}</span> <p>{{ resultat === 1 ? ‘OK’ : ‘KO’ }}</p> Filter => défini dans l’instance de Vue
  13. 13. Interpolation sur les attributs v-bind <a v-bind:href="search_url"> Search </a> <div v-bind:id=" ’id’ + nb"> </div> <span :title="message"> </span> <a href="{{ search_url }}"> Search</a>
  14. 14. <div>{{ speakers.sort().join(‘, ‘) }}</div> <script> new Vue({ el: '#app', data: { speakers: [ 'Grincheux', ‘Prof’] } }) </script> , computed: { allSpeakers () { return this.speakers.sort().join(‘, ‘) } Computed properties allSpeakers Props en cache ! {{ ... }}
  15. 15. Watched properties new Vue({ data: { firstname: 'Archibald', lastname: 'Haddock', fullname: '' }, watch: { firstname (val) { this.fullname = val + ‘ ‘ + this.lastname }, lastname (val) { this.fullname = this.firstname + ‘ ‘ + val } } }) Peut être coûteux ! Préférez les computed props computed: { fullname () { return this.firstname + ‘ ‘ + this.lastname }
  16. 16. Démo (juste pour voir les properties)
  17. 17. Continuons avec … Les directives v-*
  18. 18. Directives Attributs commençant par v- Avec un argument Avec des modificateurs <input v-model="name"> <a v-bind:href="search_url"> Search </a> <input v-model.trim="name" type="text"> <form v-on:submit.prevent="updateData">
  19. 19. Two-way binding <span>Hello {{ name }} !</span> <input v-model="name"> <script> new Vue({ el: '#app', data: { name: 'world' } }) </script> v-model
  20. 20. Evénements DOM <h3> Talk: {{ title }} </h3> <button v-on:click="like"> J’aime </button> <script> new Vue({ data: { title: "BeerScript, le langage pour l’apéro" }, methods: { like (event) { … }, } }) </script> v-on
  21. 21. Conditional rendering <h3> Talk: {{ title }} </h3> <div v-if="like"> Vous aimez ça ! </div> <script> new Vue({ data: { title: "Pourquoi Angular3 ne supportera que le VBScript", like: true } }) </script> v-if v-else <div v-else> Vous n’aimez pas </div>
  22. 22. List rendering <div v-for="talk in talks"> <h3>{{ talk.title }}</h3> </div> <script> new Vue({ data: { talks: [ { "title": "..." }, { "title": "..." } ] } }) </script> v-for Peut être une computed prop ou une méthode
  23. 23. Custom directive <button v-bigbutton:success> Yes ! </button> v- ... <script> Vue.directive({ ‘bigbutton’, { bind (el, binding, vnode) { el.classList = 'btn btn-lg btn-' + binding.arg } }}) </script>
  24. 24. Démo (cette fois, le style est top !)
  25. 25. Transition <transition name="fade"> <p v-if="showTheBook"> <img src="..." /> </p> </transition> <style> .fade-enter-active, .fade-leave-active { transition: opacity .8s } .fade-enter, .fade-leave-active { opacity: 0 } </style>
  26. 26. Poursuivons avec … La classe Vue
  27. 27. Une instance "Vue" new Vue({ el: '#app', template: '', data: { … }, computed: { ... }, watch: { ... }, methods: { ... }, filters: { … }, // {{ name | capitalize }} // Méthodes liées au // cycle de vie de l’instance created () { … }, mounted () { … }, beforeUpdate () { … }, updated () { … } ... })
  28. 28. Cycle de vie Source: https://vuejs.org/v2/guide/instance.html
  29. 29. Et maintenant... Les composants
  30. 30. Les composants Extension des éléments HTML de base pour construire des éléments réutilisable <talks> ... ... ... ... </talks>
  31. 31. Les composants <template id="talks-template"> <div v-for='talk in talks'> {{ talk.title }} </div> </template> new Vue({ el: '#app', data: { talks: [ { title: '...' }, { title: '...' } ] } }) Vue.component('talks', { template: '#talks-template', props: [ 'talks' ] }) <div id="app"> <talks :talks="talks"></talks> </div>
  32. 32. Le tout en un =.CSS.HTML .JS .VUE ++
  33. 33. Composants: .vue <div class="talks"> <div class="talk" v-for="talk in talks"> <h3 class="talk-title">{{ talk.titre }}</h3> </div> </div> export default { name: 'talks', props: [ 'talks' ], methods: { ... } } .talks { margin: 0 50px; } .HTML .JS .CSS
  34. 34. Composants: .vue <template> <div class="talks"> <div class="talk" v-for="talk in talks"> <h3 class="talk-title">{{ talk.titre }}</h3> </div> </div> </template> <script> export default { name: 'talks', props: [ 'talks' ], methods: { ... } } </script> <style scoped> .talks { margin: 0 50px; } </style> .VUE
  35. 35. Démo (si ça marche, tournée générale...)
  36. 36. Vue-router Et y a quoi d’autres ?
  37. 37. Vue-router <div id=”#app”> <router-link to=”/talks” tag=”button”> Talks </router-link> <router-link to=”/speakers” tag=”button”> Speakers </router-link> <router-view></router-view> </div>
  38. 38. Vue-router const routes = [ { path: '/talks', name: 'talks', component: require('./TalkList.vue') }, { path: '/talk/:id', components: { default: require('./Talk.vue'), nav: require('./Nav.vue') } }, { path: '*', redirect: '/talks' }] import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', routes : routes }) new Vue({ el: '#app', router : router })
  39. 39. Démo (grosse sérénité sur cette démo...)
  40. 40. Vuex Et y a quoi d’autres ?
  41. 41. Vuex Source: https://vuex.vuejs.org Gestion centralisé de state pour tous les composants d’une application Inspiré par Flux
  42. 42. Création du store const store = new Vuex.Store({ mutations: { setTalks (state, talks) { state.talks = talks } }, state: { talks: [] }, getters: { afternoonTalks: state => { return state.talks.filter(...) } }, actions: { fetchTalks ({ commit }) => { api.fetchTalks() .then(res => commit(’setTalks’, res.data)) } }
  43. 43. Utilisation du store import { mapState } from 'vuex' new Vue({ store : store, created () { this.$store.dispatch('fetchTalks') // Action invoquée pour avoir // les data à la création de la Vue }, computed: mapState([ // Helper pour créer des accès au state 'talks' // Equivalent this.$store.state.talks ]), }
  44. 44. Démo (et après, c’est fini !!!)
  45. 45. Vue-devtools Et y a quoi d’autres ?
  46. 46. Vue-devtools - Components
  47. 47. Vue-devtools - Vuex
  48. 48. https://github.com/vuejs/awesome-vue Et y a quoi d’autres ?
  49. 49. En conclusion... Après 2 ans d’existence, la communauté grandit vite ● Focus sur la simplicité ● Orienté composant ● Montée en compétence très rapide (des connaissances standards en JavaScript et HTML suffisent) Vue.js doit faire partie de votre réflexion ! Source: https://github-ranking.com/
  50. 50. Merci ! @_bruno_b_ https://github.com/bbonnin/codeursenseine2016
  • ecassamc

    Oct. 5, 2021
  • kboussebat

    Apr. 23, 2017

Présentation de Vue.js faite lors de Codeurs en seine 2016.

Vues

Nombre de vues

1 160

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

61

Actions

Téléchargements

12

Partages

0

Commentaires

0

Mentions J'aime

2

×