Successfully reported this slideshow.
Your SlideShare is downloading. ×

Don't Over-React - just use Vue!

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 50 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Don't Over-React - just use Vue! (20)

Advertisement

Recently uploaded (20)

Advertisement

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...

Editor's Notes

  • vue vs vue.js
  • Approachable
  • Easy to add to existing sites
  • Let me stress - VUE DOES MORE THEN THIS! When I start learning something I will intentionally ignore things that I think I'm not quite ready for yet, so when I first started, Vue did two things for me.

    Two-way binding - not terribly exciting but really useful. So if I want to put a form field on a page and know when it changes, or I want to set it based on some condition or an Ajax load, Vue makes that easy.
    By template language (and the docs call it Declarative Rendering), I basically have a way of saying that if I have a JS variable called name and the value is ray, I want to show that on the page. That's not terribly exciting, but it goes very deep. Instead of a simple variable name I could have an array of names. Vue has a way to render that. WHat if name was empty of not yet defined? Vue provides conditionals. So if you've ever used or heard of Jade (now called Pug), Handlebars, Mustache, etc, than Vue has this baked in.
  • code pen
  • code pen
  • demo app.cats.push

×