Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Vue.js, même un dev java peut en faire !

828 vues

Publié le

Slides TIA BreizhCamp 2017 sur VueJS

Publié dans : Technologie
  • Soyez le premier à commenter

Vue.js, même un dev java peut en faire !

  1. 1. Vue, même un dev Java peut en faire ! #BreizhCamp #VueJS //TODO: Trouver un titre moins naze
  2. 2. Bruno Bonnin Old developer, Dashboard maker, Data architect @MyScript developer.myscript.com/ myscript.com/about/join-us/
  3. 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. 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. 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. 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. 7. La base: l'interpolation <h1>Bonjour {{ name }} !</h1> {{ ... }} v-bind <a v-bind:href="search_url">Search</a> <span :title="message"> </span>
  8. 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. 9. Les composants <barchart v-bind:values="dataset" v-bind:title="chartTitle"/>
  10. 10. Les composants =.CSS.HTML .JS .VUE ++ Vue.component('barchart', { template: '<h2>{{title}}</h2><canvas/>', props: [ 'title', 'values' ] })
  11. 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. 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. 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. 14. Merci ! @_bruno_b_ https://github.com/bbonnin/breizhcamp2017-vuejs

×