Beginning Vue.js

Course Description

Vue.js is an open source JavaScript library for building modern, interactive web applications. Its component-based approach, intuitive API, blazingly fast core, and compact size make Vue.js a great solution to craft your next frontend application.

This is a 3-day course, balancing theory and hands-on applications that are focused on practical takeaways. This course will provide you with practical solutions to common problems when building an application using Vue. We start off by exploring the fundamentals of Vue.js: its reactivity system, data-binding syntax, and component-based architecture, through practical examples. After that, we delve into integrating Webpack to enhance your development workflow using single file components. Finally, we take an in-depth look at Vuex for state management and Vue Router to route in your single-page applications.

Overview

This course complies with instructional design principles in all eight lessons. This will ensure that you repeat and reinforce your gained knowledge at every step. Each and every minute spent on this 3-day course will incrementally take you to the next level.

Course Length

3 days

Scope

If you are interested in gaining a good grasp of Vue.js in a systematic and hands-on way by working through a real-world project, then this course is for you.

The course will provide you with knowledge of the following:

● Creating dynamic and animated lists

● Identifying how to use computed properties

● Animating with JavaScript instead of CSS

● Packaging reusable transitions into components

● Creating basic AJAX requests with Axios

● Utilizing Jasmine for testing Vue and Karma workflow

● Utilizing single-page applications and Webpack

Target Audience

This course is for web developers who have little or no prior experience with Vue.js. It mainly targets JavaScript enthusiasts who want to learn a modern and simple JavaScript framework.

Technical Requirements

Hardware:

For successful completion of this course, students will require computer systems with the following:

● Processor: Intel Core i3 or equivalent

● Memory: Minimum 4 GB RAM

● Hard disk: Minimum 35 GB

● Operating System: Windows (7 SP1 64-bit or higher)

● An internet connection

Software:

● Browser: Google Chrome or Mozilla Firefox (with the latest updates installed)

● Visual Studio 2017 (the latest version)

● Vue.js and vue-devtools Chrome or Firefox browser extension

● Node.js and npm

● Vuex library

● Feathers API player

● Axios promise-based HTTP client

● .NET Framework 4.6 or higher

Installation and Setup

Before you start with this course, we'll install npm and Vuex. You will find the steps to install these here:

Installing npm

1. As it's bundled in Node.js, the best route to follow is to install Node.js directly. You will find instructions at https://nodejs.org/en/download/

2. After you have installed npm, open the command line and type npm install -g vuecli; this will install vue-cli. The -g option stands for globally and means that wherever you are, you can type vue and it will run the program.

3. Create a new directory that will act as a workspace for development projects.

Installing Vuex

1. To install Vuex, you can add it as a dependency from https://vuex.vuejs.org/en/installation.html

2. If working on JSFiddle or a single web page, you can add Vuex from https://unpkg.com/vuex as a dependency.

Course Outline

LESSON ONE- Getting Started With Vue.Js

· A Simple Vue.js Program

· Lists and their Types

· Creating a Dynamic and Animated List

· Reacting to Events Such as Clicks and Keystrokes

· Choosing a Development Environment

· Formatting Your Text with Filters

LESSON TWO- Basic Vue.Js Features

· Learning How to Use Computed Properties

· Filtering a List with a Computed Property

· Sorting a List with a Computed Property

· Formatting Currencies with Filters

· Formatting Dates with Filters

· Displaying and Hiding an Element Conditionally

· Adding Styles Conditionally

· Adding Some Fun to Your App with CSS Transitions

· Outputting Raw HTML

· Creating a Form with Checkboxes

· Creating a Form with Radio Buttons

· Creating a Form with a Select Element

LESSON THREE- Transitions And Animations

· Integrating with Third-Party CSS Animation Libraries

· Adding Your Own Transition Classes

· Animating with JavaScript Instead of CS

· Transitioning on the Initial Render

· Transitioning Between Elements

· Letting an Element Leave Before the Enter Phase in a Transition

· Adding Entering and Leaving Transitions for Elements of a List

· Transitioning Elements That Move in a List

· Animating the State of Your Components

· Dynamic Transitions

LESSON FOUR- All About Components

· Creating and Registering a Component

· Passing Data to Your Components with Props

· Making Components Talk to Each Other

· Making Components Talk with Vuex

· Reading a Child's State

· Using Components in Your Own Components

· Content Distribution with Slots

· Single File Components with Webpack

· Loading Your Components Asynchronously

· Having Recursive Components

LESSON FIVE- Vue Communicates With The Internet

· Sending Basic AJAX Requests with Axios

· Validating User Data before Sending It

· Recovering from an Error during a Request

· Creating a REST Client (and Server!)

· Implementing Infinite Scrolling

· Processing a Request before Sending It Out

· Preventing XSRF Attacks on Your App

LESSON SIX- Single-Page Applications

· Creating an SPA with Vue-Router

· Fetching Data before Switching Route

· Managing Errors for Your Routes

· Adding a Progress Bar to Load Pages

· Using Named Dynamic Routes

· Having More Than One Router-View in Your Page

· Composing Your Routes Hierarchically

· Adding Transitions between Your Routes

· How to Redirect to Another Route

· Saving Scrolling Position When Hitting Back

LESSON SEVEN- Unit Testing And End-To-End Testing

· Using Jasmine for Testing Vue

· Adding Karma to Your Workflow

· Testing Your Application State and Methods

· Testing DOM Asynchronous Updates

· End-to-end testing with TestCafe

· Stubbing External API Calls with Sinon.JS

· Measuring the Coverage of Your Code

LESSON EIGHT- Organize + Automate + Deploy = Webpack

· Extracting Logic from Your Components to Keep the Code Tidy

· Organizing Your Dependencies with Webpack

· Using External Components in Your Webpack Project

· Developing with Continuous Feedback with Hot Reloading

· Running a Code Linter While Developing

· Releasing Your Components to the Public