Vue, Vuex & Router

Beskrivelse

Kurset tager et dybdegående kig på Vue.js-frameworket. Vue.js er kendt som det mest tilgængelige JavaScript-framework, som stadig har høj ydeevne og er nemt at vedligeholde. Kurset vil dække alle de primære elementer med over 200 eksempler og masser af øvelser. Kurset afholdes på engelsk.

Kurset er beregnet til professionelle udviklere, som har erfaring med HTML- og JavaScript 5-programmering.

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

Bemærk: Kurset dækker altid den nyeste version og de bedste eller mest populære fremgangsmåder. Men kurset kan stadig følges, hvis du bruger en lidt ældre version.

Eksempler og øvelser til ældre versioner er også i kursusmaterialet, hvis det er relevant. Efter kurser kan du med det samme føje Vue-dele til både nye og eksisterende websteder.

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 browsers 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 4: Custom Directives

Appendix 5: Plugins

Appendix 6: Server Side Rendering

Universal code
Routes
Data pre-fetching
Client Side Hydration

Workshop. Der bruges dias, masser af øvelser og mere end 200 eksempler. Kurset afholdes på engelsk

Du tilgår kurset via internettet fra din egen computer, stabil forbindelse er vigtig.
Du logger på via det tilsendte link, hvor vores underviser sidder klar til at gennemgå kurset “live” med en gruppe deltagere

Rick er seniorkonsulent og underviser fra Holland. Han har over 25 års professionel erfaring med at arbejde i små og store organisationer samt organisationer, der er i kraftig vækst. Hans passion er enkelhed, velskrevet kode og teamdynamik. Han er specialiseret i front-end-teknologier, og han taler ofte om disse emner ved internationale begivenheder.

Se vores udvalg af kurser i webudvikling her.

Online kurset Vue.js kunne også være interessant for dig.