Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Don't Over-React - just use Vue!

773 views

Published on

An introductory presentation on Vue.js.

Published in: Technology
  • Be the first to comment

Don't Over-React - just use Vue!

  1. 1. DON'T OVER-REACT - JUST USE VUE! Raymond Camden
  2. 2. mostly sorry ;)
  3. 3. WHO AM I? Raymond Camden Developer Advocate for IBM Blogging at raymondcamden.com Tweeting at raymondcamden
  4. 4. WHY VUE?
  5. 5. SIMPLE
  6. 6. NO BUILD PROCESS
  7. 7. SCALABLE
  8. 8. QUICK VUE FACTS Created by Evan You (@youyuxi) Released in February of 2014 Currently is version 2.5.13 Main site: vuejs.org GitHub: https://github.com/vuejs
  9. 9. WHAT DOES VUE DO? Two-way binding between your DOM and JavaScript Template Language (aka Declarative Rendering) And I know I said this - but it does more. A lot more.
  10. 10. INSTALLATION npm install cli install Download from site Copy and paste a script tag FTW!!!!!1!
  11. 11. <SCRIPT> STYLE <script src="https://unpkg.com/vue"></script>
  12. 12. WRITE SOME CODE! Identify where you're going to render stuff Setup some data Render that data Add events (ie on this do that) and other fancy stuff
  13. 13. $('#somediv').html('woot'); $('#yetanotherdiv').html('<b>This is awesome</b>'); $('#someotherdiv').val(2); Willy Nilly DOM Manipulation
  14. 14. Defining Vue's Place...
  15. 15. EXAMPLES codepen.io/collection/XzN gxR/
  16. 16. SOME CODE...
  17. 17. SOME MORE CODE... CODE PEN: FIRST DEMO
  18. 18. TEMPLATE DIRECTIVES - CONDITIONALS
  19. 19. TEMPLATE DIRECTIVES - LOOPS
  20. 20. WORKING WITH FORM FIELDS v-model links to data field Works in all kinds of form fields CODE PEN: FOURTH DEMO
  21. 21. EVENTS v-on:click=“something” Defined in methods block of Vue instance Easy to do modifiers (v- on:submit.prevent) @click=“something” CODE PEN: FIFTH DEMO
  22. 22. ATTRIBUTE BINDING v-bind:attribute=“value” :attribute=“value” v-bind:style="{bgcolor:curColor, font-style:textStyle}" v-bind:class="{highlighted:isActive, color:appStatus}" CODE PEN: SIXTH DEMO
  23. 23. COMPUTED PROPERTIES Virtual properties Property X is based on real data A and B Defined in the computed part of the Vue instance
  24. 24. EXAMPLE (BEFORE)
  25. 25. EXAMPLE (AFTER) CODE PEN: SEVENTH DEMO
  26. 26. VUE LIFECYCLE EVENTS Events that occur while a Vue instance is doing stuff beforeCreate, created, beforeMount, mounted, beforeUpate, updated, activated, deactivated, beforeDestroy, destroyed, errorCaptured https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
  27. 27. EXAMPLE CODE PEN: EIGHTH DEMO
  28. 28. LET'S TAKE A QUICK BREAK...
  29. 29. FULL EXAMPLE: FORM VALIDATION Do I need to explain this? Check on submit, report on top More examples: https://vuejs.org/v2/cookbook/form-validation.html
  30. 30. FULL EXAMPLE: AJAX SEARCH Accept user input Send to remote API... Render responses
  31. 31. COMPONENTS Re-usable objects of awesome-ness Template + Logic + Style = Component Also solves one of HTML's most glaring problems...
  32. 32. <nicolas-cage>
  33. 33. EXAMPLE
  34. 34. EXAMPLE CODE PEN: NICOLAS-CAGE
  35. 35. COMPONENT EXAMPLES Google Static Maps: https://www.npmjs.com/package/vue-static- map Bootstrap: https://bootstrap-vue.js.org/ Vuetify: https://vuetifyjs.com/en/
  36. 36. MORE COMPONENT STUFF You can pass data in from the parent You can listen for events from the component Slots
  37. 37. SLOT EXAMPLE <mything thankyou="Hey buddy, thank you for doing that thing. I appreciate it. Here's a kitten."></mything> <mything> <div slot="thankyou"> Hey, I want to <i>really</i> thank you for taking the time to do whatever. We here at Mega Corp truly care that you took the time. Oh, and here, please take a kitten! </div> </mything>
  38. 38. ROUTING Not a part of Vue Official library: vue-router (https://router.vuejs.org) "If I'm at location /foo, I want to do Foo" "if I'm at location /goo, I want to do Goo"
  39. 39. EXAMPLE (FROM THE DOCS)
  40. 40. EXAMPLE (STILL FROM THE DOCS) CODE PEN: EXAMPLE OF ROUTING IN VUE
  41. 41. FULL EXAMPLE: MASTER/DETAIL First page - list of data Second page - detail
  42. 42. STATE MANAGEMENT Solves a problem you may not have! One component, one set of data = easy Two components, two set of data = mostly easy Many components, one set of data = um....
  43. 43. VUEX (Another) library for Vue (deeply integrated) "Store" Components can read from the store Components cannot change data in the store
  44. 44. VUEX EXAMPLE CODE PEN: STOCK GAME
  45. 45. THE CLI Scaffolding tool Focused on SPAs https://github.com/vuejs/vue-cli Supports Single File Components
  46. 46. SINGLE FILE COMPONENT S
  47. 47. WALKTHROUGH
  48. 48. BUT WAIT – THERE’S MORE!
  49. 49. EVEN MOAR!!! Devtools Extension (Chrome, Firefox, Electron, Apple Keynote Browser)  https://github.com/vuejs/vue-devtools Nuxt (nuxtjs.org) Sarah Drasner on CSS-Tricks: https://css-tricks.com/intro-to-vue-1- rendering-directives-events/ My Stuff: https://www.raymondcamden.com/tags/vuejs
  50. 50. ANY QUESTIONS? Carol is judging your questions...

×