Kurs om
Vue.js grundkurs

Vue.js Overview

• Why Vue.js was invented
• Evan You
• Release history
• Vue components

Part 1 - Preparation

We first discuss som topics that are pre-requisites for the course, to ensure all course participants has a good starting point.

Highlights of Modern JavaScript

• Lambda expressions
• Async functions
• Using the Object object
• The spread operator
• Array and object destructuring
• Classes
• Getters and setters
• Static members
• Subclasses
• Modules
• Export and import

ES Modules

• What is ESM
• ESM syntax
• Export forms
• Import forms
• Path forms
• ESM in browsers

Using NPM and NPX

• Using NPM
• Installing a NPM package
• Dependencies
• Global (script) packages
• Using NPX
• Alternatives to NPM

What is SPA (Single Page App)

• Classic web architecture
• Browser DOM
• Page navigation
• AJAX powered web app
• Partial HTTP transactions
• SPA web architecture
• Page components
• Navigation within an SPA
• SPA deployment architecture

Part 2 - Kickstart

How to build a Vue app step by step.

Embedded Vue

Instructions of how to build your first Vue app using CDN links.

Vue Basics

• Need a bundler
• Creating a Vue project using Vite
• Understanding SFC - Single File Component
• Understanding the difference between Options and Compositions API
• Using pre-processing languages

The SFC Version

Instructions of how to step by step build a multi widget SFC app.

Part 3 - The Details

Template Syntax

• Text interpolation
• Handlebar syntax
• JavaScript expressions only
• Prevent expression evaluation
• Injecting HTML
• Binding attributes
• v-bind
• Simplified syntax
• Dealing with events
• Modifiers
• Formatting functions

Reactivity

• Why do we need reactive?
• Reactive objects
• Restrictions
• Using ref()
• reactive() vs. ref()
• Understanding <script setup>

Directives

• What is a directive?
• Conditional rendering
• v-if, v-else-if, v-else
• v-show
• Usage of the <template> tag
• List rendering
• v-for over an array
• v-for over an object
• Usage of :key
• Composite iteration
• How to combine v-if with v-for

Form Field Value Bindings

• How to bind a reactive variable to a form field
• Using v-model
• Text modifiers
• Special handling for date fields
• Working with checkboxes
• Working with radio buttons
• Working with <select> fields

Components

• Local registration
• Global registration
• Declaring inputs: props
• Props typing
• Props requirements
• Props validation
• Passing values to props
• Declaring outputs: emits/events
• Event validation
• Event modifiers
• Key-event modifiers
• Fall-through attributes

Life-Cycle Hooks

• What is a hook?
• Mount hooks
• Other life-cycle hooks

Computed Properties

• What is computed property
• How to create a computed property
• Computer property with getter and setter

Watched Properties

• What is a watcher
• How to create and use a watcher
• Understanding watch() vs. watchEffects()

Using Slots

• Why do we need slots?
• Using a single slot
• Example Twitter Bootstrap Card widget
• Using named slots
• Using <Teleport>

Part 4 - Routing

The core essence of SPA is routing; i.e. how to provide the illusion of navigating to different logical pages, but still just restructuring the DOM tree.

Basic Routing

• What is routing?
• Understanding page components
• The minimum needed for a routing Vue app
• Importing the Router
• Defining routes
• Routed page layout
• Navigation links

More about Routing

• Access to the router and the current route
• Meta properties
• Programmatic navigation
• Named routes
• Redirects
• Not-found route (catch-all)
• Lazy-loaded page components
• Parameterized routes
• Route props
• Nested routes (child routes)

Guarded Navigation

• Understanding navigation gueards
• Guard forms
• Global guards
• Single route guards
• Page component guards

Part 5 - Production

Aspects when rolling out to production.

Build

• Development vs. production
• Building for production
• Build configuration
• Dealing with assets
• Conditional build
• Using .env files
• Setting build mode
• Reading configuration parameters within the app
• Tracking run-time errors

Deploy

• Server configuration
• Non-root context path

Server-Side App

• Understand the limitation of SPA
• Understand how to mitigate slow boot time
• Strategies for server-side rendering
• Brief about PWA

Part 6 - Libraries

An overview of some useful Vue libraries.

Pinia

• What is state management
• Understanding Pinia
• Concepts
• How to create a Pinia based Vue 3 app using Vite
• State
• Actions
• Getters

Vue i18n

• What is i18n?
• Overview of features
• Sample usage
• Key substitution
• How to change language

Vuetify

• What is Vuetify?
• Look and feel
• Components
• Usage

Här ser du vilka kursdatum som är tillgängliga. Klicka på en av datumknapparna för att anmäla dig till ett kurstillfälle. På kursen pratar läraren svenska, medan vårt kursmaterial alltid är författat på engelska.

Missa inte vår samfaktureringsrabatt! Är ni fler personer från samma företag/organisation som går på samma kurs och kurstillfälle, rabatteras tillkommande personer med 25%. Ni kan anmäla er till kursen en och en, men uppger då samma företag, så ordnar vi resten. Samtliga deltagare från samma företag ingår då på samma faktura, den första till fullt pris och resterande till rabatterat pris.

Boka din plats på vår fjärrkurs, via Zoom

Du sitter bekvämt framför datorn och deltar i kursen via internet. Vi använder programvaran Zoom för alla våra fjärrkurser. I priset ingår kursmaterial som PDF.

Pris: 18 000 kr + moms

2 dec. 2024 16 dec. 2024