WA2937
Introduction to Vue.js Training
This 2 day course is designed to get you started building small to intermediate sized front end applications for browsers. The course is structured to match the philosophy of Vue, that is, adopt Vue incrementally. You start by adding small functionalities to an existing application. Later you’ll learn to build more ambitious Single Page Application (SPA). With SPA, Vue controls the entire frontend which is completely decoupled from the backend software.
Course Details
Duration
2 days
Prerequisites
- Experience with web frontend technologies like HTML, CSS and AJAX.
- Good knowledge of JavaScript is recommended.
Target Audience
Developers responsible for building web based frontend UI applications.
Course Outline
- Introduction to Vue.js
- What is Vue.js?
- What Makes Vue.js Unique?
- Progressive Adoption of Vue.js
- Using Vue.js
- Hello World
- The Vue Instance
- Data Binding Basics
- Binding to an Attribute
- Computed Property
- A Note About ES6 Object Literal
- Event Handling
- More About Events
- Introduction to Components
- Example Component
- Differences Between Vue Instance and Component
- Template Syntax
- What is a Template?
- Showing Data
- Using Expressions
- Rendering HTML Text
- Setting Element Attributes
- Conditionally Showing Elements
- v-else-if and v-else
- v-show
- Rendering a List
- Using v-for
- Getting the Loop Index
- Identifying Each Item
- Event Handling Inside a Loop
- Grouping Sibling Elements
- Registering Event Handlers
- Event Modifiers
- Conditional CSS Styling
- Supply Class Array
- Inline Styles
- Working With Forms
- Two Way Data Binding
- Example Two Way Data Binding
- Checkbox
- Bind a Non-boolean Property
- Radio Button
- Radio Buttons from a Dynamic List
- Select Dropdown
- Binding an Object to Select
- Working With Numbers
- Handle Form Submission
- Handling Input Change Event
- Vue Components
- Introduction to Components
- Declaring a Component
- The Vue.component() Method
- Using a Component
- Component State
- The Component Tree
- Single Root Element
- Passing Data to a Child Component
- Supplying the Input
- Raising Events
- Example: Raising an Event
- Handling the Event from the Parent
- Obtaining Reference to a Child Component
- Lifecycle Hooks
- Lifecycle
- Common Lifecycle Hooks
- Example: Component Lifecycle Hooks
- Use the Component
- Example: Vue Instance Lifecycle
- Other Lifecycle Hooks
- Single File Component
- Shortcomings of Regular Components
- What is Single File Component (SFC)?
- Example Single File Component
- The .vue File Syntax
- Using a SFC
- Steps to Use a SFC
- Vue Command Line Interface (CLI)
- Installing Vue CLI
- Developing SFC
- Editor Extensions
- Single Page Application (SPA)
- What is a Single Page Application (SPA)
- Example SPA Workflow
- Traditional Web Application Capabilities
- Single Page Application Advantages
- SPA Challenges
- Overview of SPA Using Vue Router
- Create a New Application Project
- Anatomy of the Project
- Creating View Components
- Setting Up the Route Table
- Adding Links to Views
- Programmatic Navigation
- Accepting Path Parameters
- Supplying Path Parameters
- Test, Build and Deploy
- HTTP Client Development
- Ways to Write HTTP Client
- Using Axios in Single File Component
- Using Axios in a Conventional Component
- The axios Object Methods
- The Configuration Object
- Response Object Properties
- Making a POST Call
- Error Handling
- Lab Exercises
- Lab 1. Getting Started with Vue.js
- Lab 2. Basic Event Handling
- Lab 3. Basic Template Design
- Lab 4. Form Input Handling
- Lab 5. Basic Component Development
- Lab 6. Componentize an Application
- Lab 7. Single File Component
- Lab 8. Basic Single Page Application (SPA)
- Lab 9. HTTP Client Development
- Lab 10. Advanced Routing
