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.

Vue - the Progressive Framework

292 views

Published on

Meetup Talk by Jennifer Zeiser about the progressive Framework Vue.js.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Vue - the Progressive Framework

  1. 1. Vue The Progressive Framework
  2. 2. Evan You
  3. 3. The beginning Data binding Data-driven DOM manipulations
  4. 4. “progressive” “developing or happening gradually or in stages”
  5. 5. “A progressive framework adapts to a project’s inherent complexity.” “progressive framework”
  6. 6. Vue The progressive framework • Incrementally adoptable • View layer centric core library • Approachable
  7. 7. Vue The progressive framework • Incrementally adoptable • View layer centric core library • Approachable
  8. 8. Model-View-ViewModel (MVVM) View ViewModel Model
  9. 9. Vue and MVVM var vm = new Vue({ el: ‘#app’, data: obj }) vm.$el vm.$data
  10. 10. Document Object Model (DOM) html head linkmeta title body ph1 img span
  11. 11. DOM updates DOM Render Tree Layout Paint html head body linkmeta title ph1 img span ❌
  12. 12. body h1 img p spanbody ph1 img span body ph1 img span body ph1 img span ——————————————————————————————- Virtual DOM DOM
  13. 13. Vue The progressive framework • Incrementally adoptable • View layer centric core library • Approachable
  14. 14. Single-File Components Hello.vue Template Script Style
  15. 15. “Hello world” example
  16. 16. lang attribute
  17. 17. Scoped CSS
  18. 18. Tools • Scaffolding • Debugging Vue CLI Vue devtools
  19. 19. Vue devtools
  20. 20. Vue The progressive framework • Incrementally adoptable • View layer centric core library • Approachable
  21. 21. First-party libraries • Routing • State management • Server-side rendering Vue Server Renderer Vuex Vue Router • …
  22. 22. Thank you for your attention!

×