Duration
3 days
Overview
Learn how to make your website elicit the “Wow!” response and make your web pages more interactive and user friendly. Participants will learn how to code using Vue.js Framework from scratch using nothing more than a text editor and a web browser (such as Firefox, Chrome or Internet Explorer).
Course Prerequisite
Participants should have an understanding of how to use a web browser and HTML in order to gain maximum benefit from this course.
Course Objective
At course completion, participants will have a solid foundation in Javascript syntax and applications.
Chapter 1 - Introduction
- What is Vue.js?
- Getting Started
- Declarative Rendering
- Conditionals and Loops
- Handling User Input
- Composing with Components
- Relation to Custom Elements
Chapter 2 – The Vue Instance
- Constructor
- Properties and Methods
- Instance Lifecycle Hooks
- Lifecycle Diagram
Chapter 3 – Template Syntax
- Interpolations
- Text
- Raw HTML
- Attributes
- Using JavaScript Expressions
- Directives
- Arguments
- Modifiers
- Filters
- Shorthands
- v-bind Shorthand
- v-on Shorthand
Chapter 4 – Computed Properties and Watchers
- Computed Properties
- Basic Example
- Computed Caching vs Methods
- Computed vs Watched Property
- Computed Setter
- Watchers
Chapter 5 – Class and Style Bindings
- Binding HTML Classes
- Object Syntax
- Array Syntax
- With Components
- Binding Inline Styles
- Object Syntax
- Array Syntax
- Auto-prefixing
Chapter 6 – Conditional Rendering
- v-if
- Conditional Groups with v-if on <template>
- v-else
- v-else-if
- Controlling Reusable Elements with key
- v-show
- v-if vs v-show
- v-if with v-for
Chapter 7 – List Rendering
- v-for
- Basic Usage
- Template v-for
- Object v-for
- Range v-for
- Components and v-for
- v-for with v-if
- key
- Array Change Detection
- Mutation Methods
- Replacing an Array
- Caveats
- Displaying Filtered/Sorted Results
Chapter 8 – Event Handling
- Listening to Events
- Method Event Handlers
- Methods in Inline Handlers
- Event Modifiers
- Key Modifiers
- Modifier Keys
- Why Listeners in HTML?
Chapter 9 – Form Input Bindings
- Basic Usage
- Text
- Multiline text
- Checkbox
- Radio
- Select
- Value Bindings
- Checkbox
- Radio
- Select Options
- Modifiers
- .lazy
- .number
- .trim
- v-model with Components
Chapter 10 - Components
- What are Components?
- Using Components
- Props
- Custom Events
- Content Distribution with Slots
- Dynamic Components
- Misc
Programme scope, delivery arrangements and suitability are confirmed during enquiry.