Courses and Conferences

DTI Main Reception

Do you need help?

  • Gregersensvej 8
  • 2630 Taastrup
Google MapsApple MapsRejseplanen
  • Forskerparken Fyn, Forskerparken 10F
  • 5230 Odense M
Google MapsApple MapsRejseplanen
  • Teknologiparken Kongsvang Allé 29
  • 8000 Aarhus C
Google MapsApple MapsRejseplanen
  • NordsøcentretPostboks 104
  • 9850Hirtshals
Google MapsApple MapsRejseplanen
  • Gammel Ålbovej 1
  • 6092Sønder Stenderup
Google MapsApple MapsRejseplanen

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.

Evaluation

4stars

All course activities vil be evaluated by the participants

The evaluation is based on: 5 participants

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
    - show

  • List 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
    - Naming

  • Custom 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

Underviser Rick Beerendonk

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.

Click here to find other relevant course in web development

Do you have any course related questions, please contact