Introductory talk on Vue.js

1. Getting
Started with
Vue.js
Felicia O’Garro
Software Engineer
Getting Started with Vue.js

2. • Progressive framework for
building user interfaces
• Created by Evan You in 2014
• Core library focuses on the view
layer, but can also be used for
building single page applications
• Can be integrated with other
libraries and/or existing projects
What Is Vue.js?
Getting Started with Vue.js

3. Comparison to other UI Frameworks
Getting Started with Vue.js

4. Vue Instance
Getting Started with Vue.js

5. Vue Instance (continued)
Getting Started with Vue.js

6. Lifecycle Diagram
Getting Started with Vue.js

7. • HTML syntax that can bind the rendered DOM to the
Vue Instance.
• Compiles templates into Virtual DOM render functions
• JSX support available, but not recommended.
Template Syntax
Getting Started with Vue.js

8. Template Syntax
Div
Span
Section
Nav
Article
Header/Footer
Video
Getting Started with Vue.js

9. • v-if
• v-for
• v-on
• v-model
• v-show
• v-bind
• v-html
• v-once
• v-else
• v-else-if
Directives
Getting Started with Vue.js

10. Computed Properties
Head
Paragraph
Link
Image
List
List Item
Table
Div
Span
Section
Nav
Article
Header/Footer
Video
Getting Started with Vue.js

11. Watchers
Head
Paragraph
Link
Image
List
List Item
Table
Div
Span
Section
Nav
Article
Header/Footer
Video
Getting Started with Vue.js

12. Component System
Getting Started with Vue.js

13. Components
Getting Started with Vue.js

14. Props
Getting Started with Vue.js

15. • Mixins
• Filters
• Plugins
Other features
Getting Started with Vue.js

16. • Vue Router
• Vuex
• Nuxt
• Vuetify
Scaling with Vue.js
Getting Started with Vue.js

17. Getting Started with Vue.js

18. • Direct script tag
• CDN
• NPM/Yarn
• Vue CLI
Installation
Getting Started with Vue.js

19. Resources
Getting Started with Vue.js
• Vue.js
• Vue Router
• Vue Tools
• Vuex
• Vuetify
• Vue-CLI
• Vue Mastery
• NUXT
• Axios
• Awesome Vue

20. THANKS MUCH!!!
Felicia O’Garro
Software Engineer
Getting Started with Vue.js