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 Component Tools

115 Aufrufe

Veröffentlicht am

Two core features of Vue.js are Single File Components and Declarative Rendering. Vue.js gives us flexible ways to reuse code and distribute functionalities for components. These slides will show you how we can encapsulate logic while still keeping our components customisable without having to override styles. We will use Tools like Mixins and Slots and learn why we should not extend components like one might know it from class inheritance of object oriented languages.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Vue.js Component Tools

  1. 1. Vue.js Component Tools | @vannsl Vue.js Component Tools
  2. 2. Vanessa Böhner Frontend Developer, Munich @vannsl @vannsl vannsl.io
  3. 3. Vue.js Component Tools | @vannsl Core Features • Single File Components • Declarative Rendering
  4. 4. Vue.js Component Tools | @vannsl CTA Button active disabled
  5. 5. Vue.js Component Tools | @vannsl CTA Button HTML active disabled
  6. 6. Vue.js Component Tools | @vannsl CTA Button CSS
  7. 7. Vue.js Component Tools | @vannsl CTA Button JS
  8. 8. Vue.js Component Tools | @vannsl Project structure styles.css index.html script.js
  9. 9. Vue.js Component Tools | @vannsl Project structure styles.css example1.html example2.html example3.html example1.js example2.js example3.js
  10. 10. Vue.js Component Tools | @vannsl Relaunch / Redesign
  11. 11. Vue.js Component Tools | @vannsl + CSS & JS changes
  12. 12. Vue.js Component Tools | @vannsl Project structure styles.css example1.html example2.html example3.html example1.js example2.js example3.js
  13. 13. Vue.js Component Tools | @vannsl Single File Components
  14. 14. Vue.js Component Tools | @vannsl Single File Component Vue.js - Single File Component
  15. 15. Vue.js Component Tools | @vannsl SFC - Template curly braces v-if / v-else v-for
  16. 16. Vue.js Component Tools | @vannsl Declarative Rendering Vue - Reactive Data Binding
  17. 17. Vue.js Component Tools | @vannsl SFC - Template - Alternatives Vue.js - Render function Use render functions or JSX
  18. 18. Vue.js Component Tools | @vannsl SFC - Script imports name components props data methods render … Lifecycle Hooks: created mounted updated destroyed
  19. 19. Vue.js Component Tools | @vannsl Component Lifecycle The Vue Instance
  20. 20. Vue.js Component Tools | @vannsl SFC - Style
  21. 21. Vue.js Component Tools | @vannsl Project structure styles.css example1.html example2.html example3.html example1.js example2.js example3.js CTA.vue
  22. 22. Vue.js Component Tools | @vannsl Small Reusable Components Vue - Composing with Components Single File Components
  23. 23. Vue.js Component Tools | @vannsl CTA.vue - Template
  24. 24. Vue.js Component Tools | @vannsl CTA.vue - Script
  25. 25. Vue.js Component Tools | @vannsl CTA.vue - Style
  26. 26. Vue.js Component Tools | @vannsl One week after Relaunch CTA.vue CTAGhost.vue
  27. 27. Vue.js Component Tools | @vannsl
  28. 28. DRY 🤔 Vue Composing Components | @vannsl
  29. 29. Vue.js Component Tools | @vannsl Code Reusability
  30. 30. Vue.js Component Tools | @vannsl Vue Extend 😐
  31. 31. Vue.js Component Tools | @vannsl Extends
  32. 32. Vue.js Component Tools | @vannsl
  33. 33. Vue.js Component Tools | @vannsl Vue Mixins 😍
  34. 34. Vue.js Component Tools | @vannsl cta-mixin.js
  35. 35. Vue.js Component Tools | @vannsl CTA.vue with cta-mixin
  36. 36. Vue.js Component Tools | @vannsl Mixins: Merging & Overlapping CTA.vue, using cta-mixin.js
  37. 37. Vue.js Component Tools | @vannsl Dynamic Content in Parent Box with CTA.vue Component Box with CTAGhost.vue Component
  38. 38. Vue.js Component Tools | @vannsl Box.vue BoxGhost.vue
  39. 39. DRY 🤔 Vue Composing Components | @vannsl
  40. 40. Vue.js Component Tools | @vannsl Vue Slots 😍
  41. 41. Vue.js Component Tools | @vannsl Composing Components
  42. 42. Vue.js Component Tools | @vannsl Box.vue
  43. 43. Vue.js Component Tools | @vannsl Slots (Parent)
  44. 44. Vue.js Component Tools | @vannsl Slots • Named Slots
  45. 45. Vue.js Component Tools | @vannsl Slots • Named Slots• Named Slots • Default Content
  46. 46. Vue.js Component Tools | @vannsl Tools Extend (nope) Mixins (if appropriate) Slots (yeah!)
  47. 47. Vue.js Component Tools | @vannsl More Tools / Pattern Filter Plugins Directives * Compound Components Scoped Slots (Renderless Components)
  48. 48. Advanced Vue.js Component Tools | @vannsl Thanks 🙏Thanks 🙏

×