Beginning Vue.js Training

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 front-end application.

This Beginning Vue.js training class 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.

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.

Goals
  1. Create dynamic and animated lists
  2. Identify how to use computed properties
  3. Animate with JavaScript instead of CSS
  4. Package reusable transitions into components
  5. Create basic AJAX requests with Axios
  6. Utilize Jasmine for testing Vue and Karma workflow
  7. Utilize single-page applications and Webpack
Outline
  1. Getting Started With Vue.Js
    1. A Simple Vue.js Program
    2. Lists and their Types
    3. Creating a Dynamic and Animated List
    4. Reacting to Events Such as Clicks and Keystrokes
    5. Choosing a Development Environment
    6. Formatting Your Text with Filters
  2. Basic Vue.Js Features
    1. Learning How to Use Computed Properties
    2. Filtering a List with a Computed Property
    3. Sorting a List with a Computed Property
    4. Formatting Currencies with Filters
    5. Formatting Dates with Filters
    6. Displaying and Hiding an Element Conditionally
    7. Adding Styles Conditionally
    8. Adding Some Fun to Your App with CSS Transitions
    9. Outputting Raw HTML
    10. Creating a Form with Checkboxes
    11. Creating a Form with Radio Buttons
    12. Creating a Form with a Select Element
  3. Transitions And Animations
    1. Integrating with Third-Party CSS Animation Libraries
    2. Adding Your Own Transition Classes
    3. Animating with JavaScript Instead of CS
    4. Transitioning on the Initial Render
    5. Transitioning Between Elements
    6. Letting an Element Leave Before the Enter Phase in a Transition
    7. Adding Entering and Leaving Transitions for Elements of a List
    8. Transitioning Elements That Move in a List
    9. Animating the State of Your Components
    10. Dynamic Transitions
  4. All About Components
    1. Creating and Registering a Component
    2. Passing Data to Your Components with Props
    3. Making Components Talk to Each Other
    4. Making Components Talk with Vuex
    5. Reading a Child's State
    6. Using Components in Your Own Components
    7. Content Distribution with Slots
    8. Single File Components with Webpack
    9. Loading Your Components Asynchronously
    10. Having Recursive Components
  5. Vue Communicates With The Internet
    1. Sending Basic AJAX Requests with Axios
    2. Validating User Data before Sending It
    3. Recovering from an Error during a Request
    4. Creating a REST Client (and Server!)
    5. Implementing Infinite Scrolling
    6. Processing a Request before Sending It Out
    7. Preventing XSRF Attacks on Your App
  6. Single-Page Applications
    1. Creating an SPA with Vue-Router
    2. Fetching Data before Switching Route
    3. Managing Errors for Your Routes
    4. Adding a Progress Bar to Load Pages
    5. Using Named Dynamic Routes
    6. Having More Than One Router-View in Your Page
    7. Composing Your Routes Hierarchically
    8. Adding Transitions between Your Routes
    9. How to Redirect to Another Route
    10. Saving Scrolling Position When Hitting Back
  7. Unit Testing And End-To-End Testing
    1. Using Jasmine for Testing Vue
    2. Adding Karma to Your Workflow
    3. Testing Your Application State and Methods
    4. Testing DOM Asynchronous Updates
    5. End-to-end testing with TestCafe
    6. Stubbing External API Calls with Sinon.JS
    7. Measuring the Coverage of Your Code
  8. Organize + Automate + Deploy = Webpack
    1. Extracting Logic from Your Components to Keep the Code Tidy
    2. Organizing Your Dependencies with Webpack
    3. Using External Components in Your Webpack Project
    4. Developing with Continuous Feedback with Hot Reloading
    5. Running a Code Linter While Developing
    6. Releasing Your Components to the Public
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this JavaScript class:

  • Basic JavaScript experience.
Preparing for Class

Training for your Team

Length: 3 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

What people say about our training

Because of our work restrictions, our company worked with Webucator to accelerate our training class into two days. Expressing some concern at the beginning of the class, our instructor still managed to keep the pace even, teach the important points and get all the labs in to our shortened time frame. Webucator made arrangements to get all the materials to us as students so we could come prepared for the accelerated learning. It was an excellent experience.
Duane Richards
LANDesk Software
Yet again, Webucator has proven extremely helpful. First with PowerPoint, and now with Excel. It provides me with exactly what I need to be able to do my job more quickly and efficiently.
Angie Wallace
Riverlake Partners
Couldn't have found a better online class! Instructor was fantastic and we got lots of interaction and help. I'll be Back.
Dave Jaenicke
Norwood Packaging Ltd.
This was a very informative and worthwhile class. It was easy to understand, there were lots of examples and we were able to work hands on with our own pieces while he taught each piece.
Teresa Maile
Priority Health

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

61,023

Students who have taken Instructor-led Training

11,715

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

9.29

Students rated our trainers 9.29 out of 10 based on 28,956 reviews

Contact Us or call 1-877-932-8228