Beskrivelse
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
- 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
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.
Click here to find other relevant course in web development
Deltagerprofil Kurset er beregnet til professionelle udviklere, som har erfaring med HTML- og JavaScript 5-programmering.
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.
Vue.js architectural concepts and creating and testing Vue.js apps
Essential JavaScript 202X for Vue.js
Creating reusable components and templates with interpolations and directives
Declarative rendering, conditional and listrendering
Handling properties and events and working with forms
Composition API, Vue CLI, Vue Routing and navigation and Dynamic and Asynchronous components
Debugging and Developer Tools
State management with Provide/Inject and Vuex
Form Workshop. Der bruges dias, masser af øvelser og mere end 200 eksempler. Kurset afholdes på engelsk
Se vores udvalg af kurser i webudvikling her.
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.
Indhold 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
