Getting started with Vue.js - CodeMash 2020
- 1. Up and Running Quickly With Burton Smith burton@breakstuff.io @stuffbreaker https://github.com/break-stuff/i-love-the-office
- 2. A Bit About Me…
- 3. A Bit More About Me…
- 5. How the world was…
- 7. Now…
- 8. So what are our options…? VSVS
- 9. How do you choose? Highly Flexible Highly Opinionated
- 10. Other Players
- 11. Why Not Vue.js? • Not as popular • Other frameworks are backed by big companies • Vue-specific code (directives, etc.) • Lack of native/mobile app support
- 12. So why choose Vue.js?
- 13. It’s Crazy fast! • Utilizes the virtual DOM • Its Reactive • Templating syntax • It’s tiny! <20KB (v3 is <10KB) • Vue v3 is even faster than Svelte!!!
- 14. Progressive Framework An incrementally adoptable ecosystem that scales between a library and a full-featured framework.
- 16. Component-Driven Architecture • Clean markup • UI Consistency • Code reuse
- 17. Very Small Learning Curve • Intuitive Framework • Great Documentation • An Amazing Community
- 21. Some References to Get You Started • Vue.js Tutorials • https://vuejs.org/ • https://vuejsdevelopers.com/ • https://alligator.io/vuejs/ • Scotch.io tutorials • http://blog.rangle.io/tag/vue/ • Free video tutorials by Maximilian Schwarzmüller
- 22. If in need… Search “AWESOME VUE” https://github.com/vuejs/awesome-vue
- 23. My Goal…
- 24. My Actual Goal… Get you up and running with Vue.js TODAY!
- 25. What we will not be covering… • Vue.js v3 – Specifically Composition API • Vuex (kind of)
- 26. Questions???
- 27. Let’s Get Started!!! • Download https://github.com/break-stuff/i-love-the-office/ • Once you have it downloaded, open a command prompt at the root of the project and run npm install to install the project dependencies • To run the project run npm run serve • https://codesandbox.io/s/github/break-stuff/i-love-the-office/ • (Not Currently Working)
- 28. Dev Tools (optional) • For VS Code – Vetur • Install the browser extension (for Chrome and Firefox)
- 29. Getting Started • There are 2-and-a-half-ish ways to get started with Vue.js
- 30. Do a sweet demo…
- 32. Challenge 1 • Pull in the quote data and render it on the page.
- 33. Loops
- 34. Binding
- 35. Challenge 2 • Toggle the isFavorite property on the quote object and change the button style based on its value.
- 37. Events
- 38. Events: Part 2
- 39. Challenge 3 • Add drop-down to filter quotes by character. If no user is selected, show all quotes.
- 40. Challenge 4 • Creating your first component
- 42. Component Registration - Globally
- 43. Component Registration - Locally
- 44. Slots
- 45. Props
- 46. Challenge 5 • Move Quote-specific logic and markup to its own component
- 47. Advanced Props
- 48. Challenge 6 • Fix broken like functionality
- 49. Custom Events
- 50. Challenge 7 • Form input bindings • Event Emitting
- 51. Challenge 8 • Add new Pages and Routing
- 52. Vue-Router
- 55. Route Guards
- 56. Vuex • What is Vuex? Page A 1 2 3 Page B 1 2 3 Page C 1 2 3
- 57. Vuex Page A Page B Page C Vuex Data 1 Data 2 Data 3
- 58. How Does it Work?
- 59. Should You use Vuex?
- 60. Questions???
- 61. Thank You!!! Go forth and code!