Opleiding: VueJS Programming
In the course VueJS Programming participants learn to use the VueJS JavaScript Framework to develop modern single page Web Applications.Vue Integration
VueJS started as part of the ecosystem of the well-known Laravel PHP Framework, but is now also widely used outside of it. The integration of VueJS into an application can start with a simple script tag and can then grow with the need from 3 lines of code to managing the entire view layer. Knowledge of Babel or Webpack is not necessary to start with VueJS, but VueJS can work together with these tools.
Vue Components
The course VueJS programming starts with a discussion of the installation of the Framework and important components such as the root Vue instance, templates, data and directives, two way data binding, watchers and filters.
Vue Templates
Subsequently templates, virtual DOM and binding directives are discussed. The use of components, events, props, validation and named and custom slots are also treated. Styling with CSS is on the course program as well as rendering with JSX.
Routing
Next attention is paid to routing in VueJS with nested, dynamic and programmatic routing. Asynchronous processing with promises and state management are also discussed.
Vue Tooling en Vue Internals
Finally attention is paid to VueJS Tooling and the internals of VueJS.
Audience Course VueJS Programming
The course VueJS Programming is intended for Web Developers who want to use the newest version of the VueJS framework in developing modern single-page Web Applications.
Prerequisites Course VueJS Programming
Good knowledge of JavaScript and ample JavaScript programming experience and is required to participate in this course.
Realization Training VueJS Programming
The theory is treated on the basis of presentations. The concepts are illustrated with demos. The theory is interspersed with exercises. The course times are from 9.30 to 16.30.
Certification VueJS Programming
The participants receive an official certificate VueJS Programming after succesfull completion of the course.
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
