Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

A la découverte de vue.js

1.796 visualizaciones

Publicado el

Présentation de VueJS faite lors d'un meetup Codeurs en Seine

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

A la découverte de vue.js

  1. 1. À la découverte de Vue.js
  2. 2. Bruno Bonnin Old developer, Dashboard maker, Data architect @MyScript webdemo.myscript.com/ myscript.com/about/join-us/
  3. 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. 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. 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 ! ?
  6. 6. Démo vue init webpack-simple first-app cd my-first-app npm install npm run dev
  7. 7. Les concepts de base
  8. 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. 9. La base: l’instance "Vue" et Hooks sur le cycle de vie Source: https://vuejs.org/v2/guide/instance.html
  10. 10. La base: l'interpolation <h1>Bonjour {{ name }} !</h1> {{ ... }} v-bind <a v-bind:href="search_url">Search</a> <span :title="message"> </span>
  11. 11. 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>
  12. 12. Les composants
  13. 13. Les composants <barchart v-bind:values="dataset" v-bind:title="chartTitle"/>
  14. 14. Les composants Vue.component('barchart', { template: '...', props: [ 'title', 'values' ], data: function () { return { chart: null } }, methods: { … } , mounted: function () { … } }) <barchart :values="dataset" :title="chartTitle"/>
  15. 15. Les composants: définition du template Vue.component('barchart', { template: '<div><h2>{{title}}</h2><canvas/></div>', })
  16. 16. 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' })
  17. 17. Les composants: définition du template Y a aussi JSX...
  18. 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. 19. 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
  20. 20. vue-router
  21. 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. 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. 23. vuex
  24. 24. Vuex Source: https://vuex.vuejs.org Gestion centralisé de state pour tous les composants d’une application Inspiré par le pattern Flux
  25. 25. 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)) }
  26. 26. 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>
  27. 27. vue-devtools
  28. 28. Vue-devtools - Components
  29. 29. Quoi d’autres ? https://github.com/vuejs/awesome-vue
  30. 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)
  31. 31. Merci ! @_bruno_b_ https://github.com/bbonnin/demos/tree/master/vuejs

×