Embed Size (px)
Citation preview
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 #MongoDB #Elastisearch # NoSQL #Hadoop #Spark #Storm #BigData #HTML5 #AngularJS #VueJS #NodeJS
De plus en plus !De moins en moins...
MyScript
Leader de la reconnaissance d’écriture
Démo: http://webdemo.myscript.com/
Join us: http://myscript.com/about/join-us/
Java ServerPages
Un passé sombre...
Heureusement…
Et maintenant, que vais-je faireeeeeeuh ?
Orienté composantsDédié à la création d’interfaces Web interactives
Performant
Très facile à apprendre
Vue.js en quelques mots...
Focus sur la couche View
Flexible
npm install vue-cli -gvue 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
… 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 !
?
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 }} !</h1>
<span>{{ name.toLowerCase() }}</span>
<p>{{ resultat === 1 ? ‘OK’ : ‘KO’ }}</p>
Filter => défini dans l’instance de Vue
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>
<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 !
{{ ... }}
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}
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="search_url"> Search </a>
<input v-model.trim="name" type="text">
<form v-on:submit.prevent="updateData">
Two-way binding
<span>Hello {{ name }} !</span><input v-model="name">
<script>new Vue({ el: '#app',
data: { name: 'world' }})</script>
v-model
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
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-ifv-else
<div v-else> Vous n’aimez pas </div>
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
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>
Démo(cette fois, le style est top !)
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>
Poursuivons avec …
La classe Vue
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 () { … } ...
})
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> ... ... ... ... </talks>
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>
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> </div> </div>
export default { name: 'talks', props: [ 'talks' ], methods: { ... }}
.talks { margin: 0 50px;}
.HTML
.JS
.CSS
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
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=”button”> Speakers </router-link> <router-view></router-view></div>
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})
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: { talks: [] },
getters: { afternoonTalks: state => { return state.talks.filter(...) } },
actions: { fetchTalks ({ commit }) => { api.fetchTalks() .then(res => commit(’setTalks’, res.data)) } }
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 ]),}
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é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/
Merci !
@_bruno_b_
https://github.com/bbonnin/codeursenseine2016
