Introduction to Vue.js

Modern JavaScript

• Variables
• Destructuring
• Arrow functions
• Default values
• Classes
• Interpolation
• Use and creation of promises
• Object manipulation
• Modules

Discovering Vue.js

• Reactivity
• The limits of reactivity
• The virtual DOM

The Vue instance

• Integration in an HTML page
• The main.js file
• The main component

Single File Components

• Structure d’un fichier
• Philosophie des composants Vue

Creating a Vue.js project

• Tools
• Discovery of the vue-cli tool
• TypeScript
• Class components
• UI
• Folder and file architecture

Plugins

• Using a third party plugin
• Creating a plugin

Zoom on Vue components

• The template
• Reactive data
• Calculated properties
• The methods
• Conditional rendering
• The lists
• Creating directives
• Observers
• Styles
• Events
• The life cycle of a Vue component

Communication between components

• Import and use components
• Props
• Non-props attributes
• Sending and listening to an event
• The global event bus
• Listening to native events
• Modifying props
• Accessing the main view instance
• Accessing the parent view instance
• References to child components
• Dependency injection

Advanced features

• Modules
• Slots
• Form links
• Mixins
• Dynamic components
• Router view
• Transitions and animations

Going further

• Organize and reorganize your code
• Optimizing performance
• Creating a PWA with Vue