Vue.js Grundkurs

Vue.js är ett kolossalt flexibelt ramverk för att bygga moderna webb-applikationer. Med Vue kan du använda såväl klassisk som modern SPA (Single Page App) webb-arkitektur. Ett Vue system designas som en sammansättning av komponenter, vilka kan fungera som navigerbara logiska sidor eller som återanvändbara byggblock inom logiska sidor. Vi gillar Vue själva och faktum är att den webbplats du tittar på just nu är byggd med Vue tillsammans med Nuxt, Vuetify, Firebase och Axios.

Vue.js Grundkurs
4 dagar
Beginner
Webbapps utvecklare
God erfarenhet av att programmera i JavaScript och HTML/CSS
  • Node.js && NPM && NPX
  • Vue CLI
  • MS Visual Code || JetBrains IntelliJ IDEA
  • Chrome || Firefox || Edge
Denna kurs behandlar primärt Vue 2, eftersom de flesta påbyggnads-ramverk för Vue system, såsom Nuxt, VuePress, Vuetify m.fl., ännu inte har versioner som är kompatibla med Vue 3. Kursen beskriver dock de väsentligaste nyheterna i Vue 3, såsom Composition API, så att kursdeltagaren ändock kan välja att bygga ett system med Vue 3.
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.

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: 20 000 kr + MOMS/VAT (25%)

Du sitter bekvämt i ett av våra klassrum, vilka finns centralt placerade i Stockholms innerstad (Östermalmstorg).

I priset ingår tryckt kursmaterial (och som PDF), samt kaffe/te med smörgås på förmiddagen och kaffe/te med bulle på eftermiddagen.

Pris: 25 000 kr + MOMS/VAT (25%)

Om ni är tre eller fler personer från samma företags, kan ni beställa en företagsanpassad kurs. Då håller vi kursen på ett datum som passar er. Antingen på plats i era lokaler eller som en fjärrkurs. Vi kan även mixa fjärr- och klassrumskurs, om några av er önskar delta på distans medan resten föredrar att ses på plats.

Företagsanpassad Kurs

Här är ett sammandrag av vad du får lära dig på kursen.

  • Know how to use and utilize SFC (Single File Components)
  • Understand best practices of how to differentiate page, panel and widget components
  • Know how to write parameterized page navigation
  • Know how to communicate with a REST-WS back-end server
  • Know how to write multi-language web apps
  • Know how to write component unit tests

Background and Overview

  • Why Vue.js was invented
  • Evan You
  • Vue 2 vs. Vue 3

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

Using NPM and NPX

  • Using NPM
  • Installing a NPM package
  • Dependencies
  • Global (script) packages
  • Using NPX
  • Alternatives to NPM
  • What is a transpiler
  • What is pre/post-processing
  • What is a bundler

What is SPA (Single Page App)

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

Part 2 - Basic Vue

Discussions of the most essential parts of Vue to get you started.

Embedded Vue

Step-by-step you will build your first Vue app embedded on an HTML page.

Vue CLI

  • What is the Vue CLI
  • Installation
  • Getting help
  • Creating a Vue project
  • Project folder structure
  • Using the Vue CLI UI

Single File Components (SFC)

  • What is a Single File Components (SFC)
  • File structure of a SFC
  • Component types

HTML Template Syntax

  • Handlebar syntax
  • Binding attributes
  • Injecting HTML
  • v-bind
  • Simplified syntax

Simple Event Handling

  • What is an event
  • Click, keyboard, mouse, browser and form events
  • Event properties
  • Using v-on and its simplified syntax
  • Writing an event handler
  • Event modifiers

Filters

  • What is a filter
  • Simple filters
  • Local vs. global filters
  • Important changes in Vue 3

Computed Properties and Watchers

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

Vue Directives

  • Conditional rendering
  • v-if, v-else-if, v-else
  • v-show
  • List rendering
  • v-for over an array
  • v-for over an object
  • Usage of :key
  • Composite iteration
  • The template tag
  • How to combine v-if with v-for

Styles

  • Global styles
  • Local/scoped styles
  • Conditional CSS classes
  • Using SCSS

More about Events

  • Dealing with key events
  • Key event modifiers
  • Mouse button events
  • Emitting events
  • Listening for events

Part 3 - 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

  • Importing the Router
  • Defining routes
  • Routed page layout
  • Navigation links
  • Programmatic navigation

More about Routing

  • Named routes
  • Redirects
  • Aliases
  • Not-found route (catch-all)
  • Lazy-loaded page components

Life-Cycle Methods

  • Before/After component hooks
  • Router hooks

Dynamic Routing

  • Parameterized routes
  • Route props
  • Nested routes (child routes)
  • Implement pagination

Part 4 - Components

Everything you need to know about working with Vue components.

Pane and Widget Components

  • What is pane versus widget components
  • Register a component
  • Named props
  • Typed props
  • Outgoing/emitted events

Widget with Bodies

  • Slots
  • Named slots
  • Globally registered components
  • Automatic component registration

Form Field Components

  • HTML forms
  • Vue form elements
  • v-model
  • Two-way binding
  • Form field components

Mixins

  • What is a Vue mixin
  • Local mixin
  • Global mixin
  • Life-cycle methods
  • Data properties
  • Methods

Unit Testing of Components

  • What do we mean with unit testing in Vue
  • Installation of vue-test-utils
  • Using Jest
  • Writing test cases
  • Mounting components
  • Simulating User Interaction
  • Dealing with lifecycle hooks
  • Mocking

Part 5 - Plugins

Using plugins is an important part of Vue app development, because there are so many production grade plugins out there to use with just a single NPM install command.

Using Vue Plugins

  • Installing 3rd party Vue plugins
  • Where to find Vue plugins
  • Sample usage

Writing Internal Plugins

  • What is an internal plugin
  • Writing a service plugin

Communicating with Back-End Servers

  • Brief about AJAX
  • Using the fetch API
  • Installing Axios
  • Using Axios
  • Axios configuration
  • Brief about Firebase
  • Installing the Firebase SDK
  • Real-time updates with Firebase

i18n - Multi-Language Apps

  • What is i18n
  • Installation and configuration
  • Writing multi-language apps
  • Switching language
  • Best practices

Using Vuetify for Styling

  • What is Vuetify
  • Installation and configuration of Vuetify
  • Highlights
  • Simple and composite components

Part 6 - Deployment

The objective for all development is deployment. Here we discuss what you need to know regarding how to build, configure and deploy Vue apps.

Building Vue Apps

  • How to generate a deployable bundle

Configuration

  • Various build tweaks
  • What is server-side rendering and build pre-rendering

Deployment

  • Redirection configuration for SPA
  • Base URL
  • CORS
  • Sample deployment to Firebase Hosting

Part 7 - Appendix

What else, is it good to know about regarding Vue.

Highlights of Vue 3

  • Why was Vue 3 created
  • Benefits of using Vue 3
  • The Composition API
  • The Reactivity API
  • No more filters
  • Multi-root template
  • Deprecated features
  • Vite, the new CLI/Bundler

Overview of the Vue Eco-System

Discussion of some value-adding add-on Vue frameworks you should know about.