4 days course
Vue, Vuex & Router
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.
Participant profile
This course is intended for professional developers who are familiar with HTML and JavaScript 5 programming.
Outcome
- Vue.js architectural concepts
- Creating and testing Vue.js apps
- Essential JavaScript 202X for Vue.js
- Creating reusable components
- Declarative rendering
- Templates with interpolations and directives
- Conditional and listrendering
- Handling properties and events
- Working with forms
- Composition API
- Dynamic and Asynchronous components
- Debugging and Developer Tools
- Patterns and Best Practices
- Vue Routing and navigation
- Vue CLI
- State management with Provide/Inject and Vuex
Examples and exercises for past versions are included in the course material and can be applied if relevant. After the course you will be able to apply Vue plugins for existing and new websites.
Course 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
- 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
- showList Rendering
- Array
- Iterable
- Object
- Key (how to use)
Module 4: Adjusted values
- Computed Values
- Watchers
- Option (version 2 only): Filters
- With and without parameters
- Chaining
Module 5: Components
- Registration: Global vs Local
- Render
- Template
- Data
Module 6: Multiple components
Properties
- Types, Required & Validation
- Default values
- NamingCustom Events
Module 7: Forms
- Event, key and other modifiers
- Input bindings
- v-model (2-way databinding)
Module 8: Vue CLI & Debugging
- Vue CLI
- Advantages
- Commands - Vue DevTools
- Using the browser's DevTools
- VSCode debugging
- Webpack
Module 9: Slots
- Single
- Multiple
- Default value
- Scoping
Module 10: Dynamics
- Attributes
- Events
- Slots names
- Dynamic components
- Async components
Module 11: Going deeper
- Composition API
- Suspense
- Accessing DOM
- Optional: Teleports
Module 12: Lifecycle
- Creation, Destroying
- Mounting, Updating, Activation
- With mixins
Module 13: Patterns
- Error Boundaries
- Higher-Order Components
- Renderless Components
- Mixins
- Container Components
Module 14: Performance
- Lazy loading
- Functional Components
- v-once
- v-pre
- v-cloak
Module 15: Renderfunction and JSX
- Render() vs Template
- JSX vs HTML
- JSX vs JS
Module 16: Router
- Static routing
- Dynamic routing
- Nested routes
- No match (like a 404)
- Passing props
- Lazy loading
- Named routes & views
- Navigation guards
- Optional: Programmatic navigation
- Optional: Transitions
- Optional: Data fetching
Module 17: Vuex
- Store
- Getters
- Mutations
- Actions
- Modules
Module 18: Vuex with Vue
- mapState, mapGetters, mapMutations
- Reactivity
Appendix 1: Animations
- State Transitions
- List Transitions
Appendix 2: Testing
- Unit Tests
- Storybook
Appendix 3: Maintainable Projects
- Best practices
- Code organisation
Appendix 6: Server Side Rendering
- Universal code
- Routes
- Data pre-fetching
- Client Side Hydration
Underviser
Rick is a senior consultant and trainer from The Netherlands.
He has over 25 years of professional experience while working in small, large and fast growing organisations.
His passion is simplicity, wellwritten code and team dynamics.
He is specialised in front-end technologies and speaks regularly about these topics at international events.
Do you have any course related questions, please contact
- Mette Rosenløv Vad
- Konsulent
- +45 72202432