VueJS Programmeren

Vue Integratie

VueJS ging van start als onderdeel van het ecosysteem van het bekende Laravel PHP Framework, maar wordt nu ook veel daarbuiten gebruikt. De integratie van VueJS in een applicatie kan starten met een simpele script tag en kan dan meegroeien met de behoefte van 3 regels code tot het managen van de gehele view laag. Kennis van Babel of Webpack is niet nodig om met VueJS te starten, maar VueJS kan met deze tools goed samen werken.

Vue Components

De cursus VueJS gaat van start met bespreking van de installatie van het Framework en belangrijke componenten zoals het root Vue instance, templates, data en directives, two way data binding, watchers en filters.

Vue Templates

Vervolgens wordt ingegaan op templates, virtual DOM en binding directives. Ook het gebruik van components, events, props, validatie en named en custom slots komen aan de orde. Styling met CSS staat op het cursus programma evenals rendering met JSX.

Routing

Vervolgens wordt aandacht besteed aan routing in VueJS, waarbij nested, dynamic en programmatische routing aan de orde komen. Ook asynchrone afhandeling met promises en state management komen aan de orde.

Vue Tooling en Vue Internals

Tenslotte is er aandacht voor VueJS Tooling en wordt ingegaan op de internals van VueJS.

Doelgroep Cursus VueJS Programmeren

De cursus VueJS Programmeren is bedoeld voor Web Developers die de nieuwste versie van het VueJS JavaScript Framework willen gebruiken bij het ontwikkelen van moderne single page Web Applicaties.

Voorkennis Cursus VueJS Programmeren

Een goede kennis van JavaScript en ervaring met JavaScript programmeren is vereist om aan de cursus VueJS Programmeren te kunnen deelnemen.

Uitvoering Training VueJS Programmeren

De theorie wordt behandeld aan de hand van presentaties. De concepten worden toegelicht met demo's. De theorie wordt afgewisseld met oefeningen. De cursustijden zijn van 9.30 tot 16.30.

Officieel Certificaat VueJS Programmeren

De deelnemers krijgen na het goed doorlopen van de cursus een officieel certificaat VueJS Programmeren.

Modules

Module 1 : VueJS Intro

• What is Vue.js
• Installation and Setup
• vue-loader and webpack
• root Vue Instance
• Options Object
• Templates, Data and Directives
• Looping in Templates
• Binding Arguments
• Reactivity
• Two Way Data Binding
• Instance Life Cycle Hooks
• Computed Properties
• Watchers
• Filters

Module 2 : Templates

• HTML-Based Syntax
• Virtual DOM
• Render Functions
• Interpolations
• Mustache Syntax
• v-once Directive
• Raw HTML
• v-html Directive
• Attributes
• v-bind Directive
• JavaScript Expressions
• Arguments
• Modifiers
• v-bind and v-on Shorthand

Module 3 : Components

• Component Basics
• Component Registration
• Props
• Data and Methods
• Computed Properties
• Prop Validation
• Data Flow
• .sync Modifier
• Passing Content with Slots
• Named and Scoped Slots
• Custom Events
• Mixins
• Non-prop Attributes
• Components and v-for

Module 4 : Styling

• Class Binding
• Object Syntax
• Inline Style Binding
• Array Syntax
• Multiple Values
• Auto-prefixing
• Multiple Values
• Scoped CSS with vue-loader
• CSS Modules with vue-loader
• Conditional Rendering
• Preprocessors

Module 5 : Rendering with JSX

• What is JSX?
• Render Function
• Nodes, Trees and Virtual DOM
• Virtual Nodes
• Tag Name
• Data Object In-Depth
• createElement Arguments
• Constraints
• Event and Key Modifiers
• Functional Components
• Template Compilation

Module 6 : Routing

• HTML5 History Mode
• Dynamic Routing
• Passing Parameters
• Nested Routes
• Redirect and Alias
• Navigation
• Active Class
• Programmatic Navigation
• Navigation Guards
• Route Order
• Route Names

Module 7 : State Management

• State Concept
• Vuex
• State Helpers
• Mutations
• Synchronicity
• Actions
• Action Helpers
• Destructuring
• Promises
• Modules
• File Structure

Module 8 : Vue Tooling

• Example Sandbox
• WebPack and NPM
• Component Scoped CSS
• Vue Test Utils
• Jest and Mocha
• Asynchronous Updates
• TypeScript Support
• Plugins
• Annotating Return Types
• Browserify
• Pre Compiled Templates

Module 9 : Vue Internals

• Reactivity in Depth
• Object.defineProperty
• Dependency Tracking
• Change Notification
• Tracking Changes
• Watchers and Rerendering
• Property Addition nor Detected
• Touch and Notify
• Change Detections Caveats
• Declaring Reactive Properties
• Async Update Queue