Introduction to Vue.js

Outline

Chapter 1. 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
• Summary

Chapter 2. 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
• Summary

Chapter 3. 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
• Summary

Chapter 4. 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
• Summary

Chapter 5. Lifecycle Hooks

• Lifecycle
• Common Lifecycle Hooks
• Example: Component Lifecycle Hooks
• Use the Component
• Example: Vue Instance Lifecycle
• Other Lifecycle Hooks
• Summary

Chapter 6. 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
• Summary

Chapter 7. 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
• Summary

Chapter 8. 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
• Summary

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