Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

940 Aufrufe

Veröffentlicht am

Slides TIA BreizhCamp 2017 sur VueJS

Veröffentlicht in: Technologie
  • You have to choose carefully. ⇒ www.HelpWriting.net ⇐ offers a professional writing service. I highly recommend them. The papers are delivered on time and customers are their first priority. This is their website: ⇒ www.HelpWriting.net ⇐
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×