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 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 !
?
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
30. 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)