This course takes a thorough look at the progressive Vue.js framework. Vue.js is known as the most approachable JavaScript Framework while still being performant and maintainable. This course will cover all major parts with examples and exercises.
What you will learn:
• Vue.js architectural concepts
• Creating and testing Vue.js apps
• Essential JavaScript 2019 for Vue.js
• Creating reusable components
• Declarative rendering
• Templates with interpolations and directives
• Conditional and list rendering
• Handling properties and events
• Working with forms
• Dynamic components
• Plugins
• Debugging and Developer Tools
• Vue Routing and navigation
• Vue CLI
• Vuex state management
• Calling REST Services
Content:
Introduction:
• What is Vue.js
• Why Vue.js
Module 1 - Language constructs for Vue.js:
• EcmaScript 202X (JavaScript): The relevant features for Vue.js
• Class syntax
• Spread operator
• Arrow functions
• Object destructuring
• More..
• Option: TypeScript
Module 2 - Data binding:
• Data to View: Content, Attributes.
• View to Data: Events changing data or calling functions
• Styling: Class and Style attributes
Module 3 - Rendering:
• Conditional Rendering
• if
• if-else
• show
• List Rendering
• Array
• Object
• Filters
• With and without parameters
• Chaining
Module 4 - Forms:
• Two-way data binding with v-model
• Value bindings
• Modifiers
Module 5 - Vue Instance:
• Data
• Methods
• Lifecycle hooks
Module 6 - Components:
• Registration
• Properties
• Type
• Default values
• Computed Values
• Transclusion (Slots)
• Custom events
• Fetching data
• Hooks (future)
Module 7 - Multiple components:
• Parent to child communication
• Child to parent communication
Module 8 - Router:
• Static routing
• Dynamic routing
• Nested routes
• No match (like a 404)
• Passing props
• Lazy loading
• Named routes & views
• Data fetching
Module 9 - Vue CLI:
• Advantages
• Commands
Module 10 - Developer experience:
• Debugging
• Developer tools
• Unit testing
Module 11 - Vuex:
• Store
• Mutations
• Actions
• Modules
• Plugins
Module 12 - Animations:
• State Transitions
• List Transitions
Module 13 - Server Side Rendering:
• Universal code
• Routes
• Data pre-fetching
• Client Side Hydration
Module 14 - Router Advanced:
• Programmatic navigation
• Navigation guards
• Transitions
Appendix:
• Appendix 1: Dynamic Components
• Appendix 2: Custom Directives
• Appendix 3: Plugins
Audience:
This course is intended for professional developers who are familiar with HTML and JavaScript 5 programming.
Language:
• English course material, English speaking instructor
Instructor: Rick Beerendonk
Rick is a senior consultant and trainer from The Netherlands. He has over 20 years of professional experience while working in small, large and fast growing organisations. His passion is simplicity, well-written code and team dynamics. He is specialised in front-end technologies and speaks regularly about these topics at international events. Rick have teached and talked about React since 2014.