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

1. Vue
The Progressive Framework

2. Evan You

3. The beginning
Data binding
Data-driven DOM manipulations

4. “progressive”
“developing or happening
gradually or in stages”

5. “A progressive framework
adapts to
a project’s inherent complexity.”
“progressive framework”

6. Vue
The progressive framework
• Incrementally adoptable
• View layer centric core library
• Approachable

7. Vue
The progressive framework
• Incrementally adoptable
• View layer centric core library
• Approachable

8. Model-View-ViewModel
(MVVM)
View ViewModel Model

9. Vue and MVVM
var vm = new Vue({
el: ‘#app’,
data: obj
})
vm.$el vm.$data

10. Document Object Model
(DOM)
html
head
linkmeta title
body
ph1 img
span

11. DOM updates
DOM
Render
Tree
Layout Paint
html
head body
linkmeta title ph1 img
span
❌

12. body
h1 img
p
spanbody
ph1 img
span
body
ph1 img
span
body
ph1 img
span
——————————————————————————————-
Virtual DOM
DOM

13. Vue
The progressive framework
• Incrementally adoptable
• View layer centric core library
• Approachable

14. Single-File Components
Hello.vue
Template
Script
Style

15. “Hello world” example

16. lang attribute

17. Scoped CSS

18. Tools
• Scaffolding
• Debugging
Vue CLI
Vue devtools

19. Vue devtools

20. Vue
The progressive framework
• Incrementally adoptable
• View layer centric core library
• Approachable

21. First-party libraries
• Routing
• State management
• Server-side rendering Vue Server Renderer
Vuex
Vue Router
• …

22. Thank you for
your attention!