Downloaded 23 times
Uploaded byRaymond Camden
Don't Over-React - just use Vue!
Vue.js is a JavaScript framework that provides two-way binding between DOM and JavaScript, a template language for declarative rendering, and supports installation via npm, direct download, or a script tag. It allows defining where rendering will occur, setting up data, and rendering data to the DOM. Components provide reusability through templates, logic, and styles. Additional features include routing, state management with Vuex, and use of the Vue CLI for scaffolding single file components.
More Related Content
Similar to Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
- 1. DON'T OVER-REACT -JUST USE VUE! Raymond Camden
- 2.
- 3. WHO AM I? RaymondCamden Developer Advocate for IBM Blogging at raymondcamden.com Tweeting at raymondcamden
- 4.
- 5.
- 6.
- 7.
- 8. QUICK VUE FACTS Created byEvan You (@youyuxi) Released in February of 2014 Currently is version 2.5.13 Main site: vuejs.org GitHub: https://github.com/vuejs
- 9. WHAT DOES VUEDO? 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. INSTALLATION npm install cli install Downloadfrom site Copy and paste a script tag FTW!!!!!1!
- 11.
- 12. WRITE SOME CODE! Identifywhere you're going to render stuff Setup some data Render that data Add events (ie on this do that) and other fancy stuff
- 13.
- 14.
- 15.
- 16.
- 17. SOME MORE CODE... CODEPEN: FIRST DEMO
- 18.
- 19.
- 20. WORKING WITH FORM FIELDS v-model linksto data field Works in all kinds of form fields CODE PEN: FOURTH DEMO
- 21. EVENTS v-on:click=“something” Defined in methodsblock of Vue instance Easy to do modifiers (v- on:submit.prevent) @click=“something” CODE PEN: FIFTH DEMO
- 22.
- 23. COMPUTED PROPERTIES Virtual properties PropertyX is based on real data A and B Defined in the computed part of the Vue instance
- 24.
- 25. EXAMPLE (AFTER) CODE PEN:SEVENTH DEMO
- 26. VUE LIFECYCLE EVENTS Eventsthat 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.
- 28. LET'S TAKE A QUICKBREAK...
- 29. FULL EXAMPLE: FORMVALIDATION Do I need to explain this? Check on submit, report on top More examples: https://vuejs.org/v2/cookbook/form-validation.html
- 30. FULL EXAMPLE: AJAXSEARCH Accept user input Send to remote API... Render responses
- 31. COMPONENTS Re-usable objects ofawesome-ness Template + Logic + Style = Component Also solves one of HTML's most glaring problems...
- 32.
- 33.
- 34.
- 35. COMPONENT EXAMPLES Google StaticMaps: https://www.npmjs.com/package/vue-static- map Bootstrap: https://bootstrap-vue.js.org/ Vuetify: https://vuetifyjs.com/en/
- 36. MORE COMPONENT STUFF Youcan pass data in from the parent You can listen for events from the component Slots
- 37. SLOT EXAMPLE <mything thankyou="Heybuddy, 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. ROUTING Not a partof 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.
- 40. EXAMPLE (STILL FROM THE DOCS) CODEPEN: EXAMPLE OF ROUTING IN VUE
- 41. FULL EXAMPLE: MASTER/DETAIL Firstpage - list of data Second page - detail
- 42. STATE MANAGEMENT Solves aproblem 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. VUEX (Another) library forVue (deeply integrated) "Store" Components can read from the store Components cannot change data in the store
- 44. VUEX EXAMPLE CODE PEN:STOCK GAME
- 45. THE CLI Scaffolding tool Focusedon SPAs https://github.com/vuejs/vue-cli Supports Single File Components
- 46.
- 47.
- 48.
- 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. ANY QUESTIONS? Carol is judgingyour questions...
Editor's Notes
- #5 vue vs vue.js
- #6 Approachable
- #7 Easy to add to existing sites
- #10 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.
- #19 code pen
- #20 code pen
- #26 demo app.cats.push