Home About Courses Schedule Services Webinars Contact Search

Comprehensive Vue.js

SEE SCHEDULE

Duration: 5 Days

Method: Instructor led, Hands-on workshops

Price: $2750.00

Course Code: JS3002


Audience

Programmers, particularly front-end and full-stack developers who will be creating applications which run in the browser. IT Managers who will manage full-stack or front-end projects.

Description

The use of JavaScript to manage the front end of full-stack applications has exploded over the past few years. Instead of using JavaScript for basic animations, event handling, or form validation, we now expect JavaScript to manage the entire user experience in the browser. Vue.js is the perfect framework to help you get up and running fast in the world of full-stack and single-page applications. You will learn all the basics of managing an application with Vue, as well as advanced topics like Vue component life cycle, slots, the Vuex state management system, and routing.

Objectives

Upon successful completion of this course, the student will be able to:

  • Learn the basics of Vue.js, including its use of templates to display data on a page
  • Learn to set up Vue projects from scratch, or use vue-cli to set up from a template
  • Understand the fundamental concepts of Vue.js and how to use it in applications
  • Learn to create instances, learn about single page apps, Custom directives, Mixins, Routing and more
  • Discover how Vue.js works with CSS to style your websites and applications
  • Use render functions and JSX, rather than templates, to determine what Vue displays
  • Be able to control how code is executed and displayed with vue-router
  • Learn to effectively use and navigate the Vuex library
  • Build a fully functional app from scratch, and unit test your applications

Prerequisites

Students should be comfortable with HTML (structure and forms) and basic CSS (setting styles, using classes, selectors). Students should also have a basic knowledge of JavaScript as a language.

Topics

  • I. What is Vue.js? What are its features?
    • Components as building blocks
    • Component-oriented architecture
    • Single Page Applications (SPAs)
    • Vue.js use cases
  • II. Basic Vue.js usage
    • Using Vue.js in a page
    • Rendering markup
    • Conditionals and loops
    • Event handling
    • User inputs
  • III. Introduction to Components
    • Component formats
    • Single File Components (SFCs)
    • Component properties
    • Component data binding
  • IV. Managing component state
    • Data
    • Props
    • Computed data
    • Component methods
    • Methods vs computed properties
  • V. Inputs and outputs
    • Event handling
    • Iterating over data
    • Hiding and showing data
  • VI. Component lifecycle
    • Creating a component
    • Mounting a component
    • Update and activation
    • Component destruction
  • VII. Asynchronous data
    • Promises refresher
    • async/await introduction
    • Fetching data asynchronously
    • Rendering asynchronous data
  • VIII. Slots
    • What is a slot?
    • Why do we use slots?
    • Using a single slot
    • Named slots
  • IX. External state management with Vuex
    • What is Vuex?
    • What problems does it solve?
    • State and the store
    • Actions
    • Mutations
    • Shortcuts with Getters
    • Organizing code with modules
  • X. View management with the Vue Router
    • What is the router and what does it do for me?
    • Routing to a particular view
    • Routing to a view with parameters
    • Routing events
    • Fetching data while routing
Copyright ©2020 Themis, Inc. All rights reserved Privacy Policy