À la découverte de
Vue.js
Bruno Bonnin
Old developer, Dashboard maker, Data
architect @MyScript
webdemo.myscript.com/
myscript.com/about/join-us/
Orienté composants
Dédié à la création
d’interfaces Web
Performant
Très facile à
apprendre
Vue.js en quelques mots...
Focus sur la
couche View
Flexible
npm install vue-cli -g
vue init webpack monprojet
npm run dev
Et vous êtes prêt à coder !
C’est parti, on l’installe...
<script src="https://.../path/to/vue.js">Le plus simple
Mieux npm install vue
Encore mieux
… et on code !
<div id="app">
Bonjour {{ name }} !
</div>
new Vue({
el: '#app',
data: confdata
})
var confdata = {
name: 'BreizhCamp'
}
Model ViewViewModel
confdata.name = 'Codeurs en Seine' Rien de plus
à faire !
?
Démo
vue init webpack-simple first-app
cd my-first-app
npm install
npm run dev
Les concepts de base
La base: l’instance "Vue" (et ses options)
new Vue({
el: '#hero-app',
data: {
name: 'Deadpool'
},
computed: {
uppercaseName: function () {
return this.name.toUpperCase();
}
},
methods: {
clearName: function () {
this.name = '';
}
}
})
La totale sur : https://vuejs.org/v2/api/
Les données (réactives: Vue
détectera toute modification et fera
les màj du DOM nécessaire)
Les données calculées (utilisables
comme les autres données et mises
en cache)
Les fonctions utilisables via l’instance
de Vue ou dans les directives
La base: l’instance "Vue" et
Hooks sur le cycle de vie
Source: https://vuejs.org/v2/guide/instance.html
La base: l'interpolation
<h1>Bonjour {{ name }} !</h1>
{{ ... }}
v-bind
<a v-bind:href="search_url">Search</a>
<span :title="message"> </span>
La base: les directives (v-...)
<input type="text" v-model="name" >
<button v-on:click="like"> J’aime </button>
<div v-if="talk.liked"> Vous aimez ça ! </div>
<div v-else> Vous n’aimez pas </div>
<div v-for="talk in talks">
<h3>{{ talk.title }}</h3>
</div>
Les composants
Les composants
<barchart
v-bind:values="dataset"
v-bind:title="chartTitle"/>
Les composants Vue.component('barchart', {
template: '...',
props: [ 'title', 'values' ],
data: function () {
return {
chart: null
}
},
methods: { … } ,
mounted: function () { … }
})
<barchart
:values="dataset"
:title="chartTitle"/>
Les composants: définition du template
Vue.component('barchart', {
template:
'<div><h2>{{title}}</h2><canvas/></div>',
})
Les composants: définition du template
Vue.component('barchart', {
})
<barchart inline-template>
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</barchart>
<script
type="text/x-template"
id="barchart-templ">
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</script>
Vue.component('barchart', {
template: '#barchart-templ'
})
Les composants: définition du template
Y a aussi JSX...
Les composants
.CSS
.HTML
.JS .VUE
+
+
<template>
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</template>
<script>
export default {
props: [ 'title', 'values' ],
data: function () {
return { … }
},
methods: { … } ,
mounted: function () { … }
}
</script>
<style scoped>
</style>
Démo : un chart en 2 secondes !
(avec un composant qui contient un composant qui contient un composant qui …)
App.vue
Dataview.vue
Chart.vue
vue-router
Vue-router
const appRroutes = [ {
…
}, {
path: '/dataview',
name: 'dataview',
component: require('./Dataview.vue')
}, {
path: '*',
redirect: '/'
}
]
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const appRouter = new VueRouter({
mode: 'history',
routes : appRoutes
})
new Vue({
el: '#app',
router : appRouter
})
Vue-router
<div id=”#app”>
<router-link to=”/” tag=”button”> Home </router-link>
<router-link to=”/dataview” tag=”button”> Dataview </router-link>
<router-view></router-view>
</div>
vuex
Vuex
Source: https://vuex.vuejs.org
Gestion centralisé de state
pour tous les composants
d’une application
Inspiré par le pattern Flux
Création du store
const store = new Vuex.Store({
mutations: {
setTalks (state, talks) {
state.talks = talks
}
},
state: {
talks: []
},
actions: {
fetchTalks (context) => {
api.fetchTalks()
.then(res => context.commit(’setTalks’, res.data))
}
Utilisation du store
import Vue from ‘vue’
import Vuex from 'vuex'
import store from ‘./store’
Vue.use(Vuex)
new Vue({
store,
components: { ‘talkview’: TalkView },
created () {
this.store.dispatch('fetchTalks')
}
}
<template>...</template>
<script>
export default {
name: 'talkview',
computed: {
talks() {
return this.$store.state.talks
}
},
}
</script>
vue-devtools
Vue-devtools - Components
Quoi d’autres ?
https://github.com/vuejs/awesome-vue
En conclusion...
Après plus de 2 ans d’existence, la communauté grandit vite
!
Vue.js doit faire partie de votre réflexion !
● Focus sur la simplicité
● Orienté composant
● Montée en compétence très
rapide (des connaissances
standards en JavaScript et
HTML suffisent)
Merci !
@_bruno_b_
https://github.com/bbonnin/demos/tree/master/vuejs

A la découverte de vue.js

  • 1.
  • 2.
    Bruno Bonnin Old developer,Dashboard maker, Data architect @MyScript webdemo.myscript.com/ myscript.com/about/join-us/
  • 3.
    Orienté composants Dédié àla création d’interfaces Web Performant Très facile à apprendre Vue.js en quelques mots... Focus sur la couche View Flexible
  • 4.
    npm install vue-cli-g vue init webpack monprojet npm run dev Et vous êtes prêt à coder ! C’est parti, on l’installe... <script src="https://.../path/to/vue.js">Le plus simple Mieux npm install vue Encore mieux
  • 5.
    … et oncode ! <div id="app"> Bonjour {{ name }} ! </div> new Vue({ el: '#app', data: confdata }) var confdata = { name: 'BreizhCamp' } Model ViewViewModel confdata.name = 'Codeurs en Seine' Rien de plus à faire ! ?
  • 6.
    Démo vue init webpack-simplefirst-app cd my-first-app npm install npm run dev
  • 7.
  • 8.
    La base: l’instance"Vue" (et ses options) new Vue({ el: '#hero-app', data: { name: 'Deadpool' }, computed: { uppercaseName: function () { return this.name.toUpperCase(); } }, methods: { clearName: function () { this.name = ''; } } }) La totale sur : https://vuejs.org/v2/api/ Les données (réactives: Vue détectera toute modification et fera les màj du DOM nécessaire) Les données calculées (utilisables comme les autres données et mises en cache) Les fonctions utilisables via l’instance de Vue ou dans les directives
  • 9.
    La base: l’instance"Vue" et Hooks sur le cycle de vie Source: https://vuejs.org/v2/guide/instance.html
  • 10.
    La base: l'interpolation <h1>Bonjour{{ name }} !</h1> {{ ... }} v-bind <a v-bind:href="search_url">Search</a> <span :title="message"> </span>
  • 11.
    La base: lesdirectives (v-...) <input type="text" v-model="name" > <button v-on:click="like"> J’aime </button> <div v-if="talk.liked"> Vous aimez ça ! </div> <div v-else> Vous n’aimez pas </div> <div v-for="talk in talks"> <h3>{{ talk.title }}</h3> </div>
  • 12.
  • 13.
  • 14.
    Les composants Vue.component('barchart',{ template: '...', props: [ 'title', 'values' ], data: function () { return { chart: null } }, methods: { … } , mounted: function () { … } }) <barchart :values="dataset" :title="chartTitle"/>
  • 15.
    Les composants: définitiondu template Vue.component('barchart', { template: '<div><h2>{{title}}</h2><canvas/></div>', })
  • 16.
    Les composants: définitiondu template Vue.component('barchart', { }) <barchart inline-template> <div> <h2>{{ title }}</h2> <canvas/> </div> </barchart> <script type="text/x-template" id="barchart-templ"> <div> <h2>{{ title }}</h2> <canvas/> </div> </script> Vue.component('barchart', { template: '#barchart-templ' })
  • 17.
    Les composants: définitiondu template Y a aussi JSX...
  • 18.
    Les composants .CSS .HTML .JS .VUE + + <template> <div> <h2>{{title }}</h2> <canvas/> </div> </template> <script> export default { props: [ 'title', 'values' ], data: function () { return { … } }, methods: { … } , mounted: function () { … } } </script> <style scoped> </style>
  • 19.
    Démo : unchart en 2 secondes ! (avec un composant qui contient un composant qui contient un composant qui …) App.vue Dataview.vue Chart.vue
  • 20.
  • 21.
    Vue-router const appRroutes =[ { … }, { path: '/dataview', name: 'dataview', component: require('./Dataview.vue') }, { path: '*', redirect: '/' } ] import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const appRouter = new VueRouter({ mode: 'history', routes : appRoutes }) new Vue({ el: '#app', router : appRouter })
  • 22.
    Vue-router <div id=”#app”> <router-link to=”/”tag=”button”> Home </router-link> <router-link to=”/dataview” tag=”button”> Dataview </router-link> <router-view></router-view> </div>
  • 23.
  • 24.
    Vuex Source: https://vuex.vuejs.org Gestion centraliséde state pour tous les composants d’une application Inspiré par le pattern Flux
  • 25.
    Création du store conststore = new Vuex.Store({ mutations: { setTalks (state, talks) { state.talks = talks } }, state: { talks: [] }, actions: { fetchTalks (context) => { api.fetchTalks() .then(res => context.commit(’setTalks’, res.data)) }
  • 26.
    Utilisation du store importVue from ‘vue’ import Vuex from 'vuex' import store from ‘./store’ Vue.use(Vuex) new Vue({ store, components: { ‘talkview’: TalkView }, created () { this.store.dispatch('fetchTalks') } } <template>...</template> <script> export default { name: 'talkview', computed: { talks() { return this.$store.state.talks } }, } </script>
  • 27.
  • 28.
  • 29.
  • 30.
    En conclusion... Après plusde 2 ans d’existence, la communauté grandit vite ! Vue.js doit faire partie de votre réflexion ! ● Focus sur la simplicité ● Orienté composant ● Montée en compétence très rapide (des connaissances standards en JavaScript et HTML suffisent)
  • 31.