Le document présente Vue.js comme un framework JavaScript idéal pour créer des interfaces web interactives grâce à sa facilité d'apprentissage et son orientation composants. Il aborde l'installation, la configuration de base, et les concepts fondamentaux tels que l'interpolation, les directives et les composants. En conclusion, il souligne la croissance rapide de la communauté Vue.js et son importance pour les développeurs.

1. Vue, même un dev Java
peut en faire !
#BreizhCamp #VueJS
//TODO: Trouver un titre moins naze

2. Bruno Bonnin
Old developer, Dashboard maker, Data
architect @MyScript
developer.myscript.com/
myscript.com/about/join-us/

3. 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

4. npm install vue-cli -g
vue init webpack monprojet
C’est parti, on l’installe...
<script src="https://.../path/to/vue.js">Le plus simple
Mieux npm install vue
Encore mieux

5. … et on code !
<div id="app">
Bonjour {{ name }} !
</div>
new Vue({
el: '#app',
data: confdata
})
var confdata = {
name: 'Codeurs en
Seine'
}
Model ViewViewModel
confdata.name = 'BreizhCamp' Rien de plus
à faire !
?

6. La base: l’instance "Vue"
new Vue({
// Options de base
el: '#app',
data: { … },
methods: { ... },
components : { … },
// Méthodes liées au
// cycle de vie de l’instance
created () { … },
mounted () { … },
beforeUpdate () { … },
updated () { … }
...
})
// Options utiles
// pour les datas
computed: { ... },
watch: { ... },
filters: { … },
La totale sur :
https://vuejs.org/v2/api/

7. La base: l'interpolation
<h1>Bonjour {{ name }} !</h1>
{{ ... }}
v-bind
<a v-bind:href="search_url">Search</a>
<span :title="message"> </span>

8. 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>

9. Les composants
<barchart
v-bind:values="dataset"
v-bind:title="chartTitle"/>

10. Les composants
=.CSS.HTML .JS .VUE
++
Vue.component('barchart', {
template: '<h2>{{title}}</h2><canvas/>',
props: [ 'title', 'values' ]
})

11. 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

12. Quoi d’autres ?
vue-router
vuex
vue-devtools
https://github.com/vuejs/awesome-vue
vue-chartjs
vue-morris
vue2-leaflet
vue-material
vue-localstorage
vuetify
nuxt
vue-brunch vue-i18n
vue-resource

13. 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)

14. Merci !
@_bruno_b_
https://github.com/bbonnin/breizhcamp2017-vuejs