O'Reilly logo
live online training icon Live Online training

Getting Up to Speed with Vue.js

Learn how to make use of the most powerful, and easy to use, front end JavaScript frameworks

Raymond Camden

For some time, Vue.js was almost hidden in obscurity by the overwhelming amount of attention given to React and Angular. But lately, the number of people talking about, writing about, and building great apps with Vue.js has exploded. Vue.js is an incredibly simple and approachable framework. It works well when simply adding interactivity to a page and is more then appropriate for “full scale” apps as well.

This training will introduce you to Vue.js. You’ll see the full spectrum of features and development types available to you when working with the framework.

What you'll learn-and how you can apply it

  • How Vue works with both simple and complex applications.
  • What makes up a Vue application.
  • How to create components to re-use functionality.
  • How to add routing to a Vue.js application.
  • How Vuex can help manage complex data interactions within your application.

This training course is for you because...

  • You feel intimidated by the amount of work necessary in most React/Angular projects
  • You are new to JavaScript
  • You aren’t new to JavaScript but still appreciate simplicity

Prerequisites

  • Basic HTML
  • Basic CSS
  • Basic JavaScript

Course Set-up:

  • httpster, a npm module that makes it easy to start a web server from the CLI
  • A decent editor with web support – I strongly recommend Visual Studio Code

Recommended Preparation:

Recommended Follow-up:

About your instructor

  • Raymond Camden is a senior developer advocate for Auth0 Extend. His work focuses on Extend, serverless, and the web in general. He's a published author and presents at conferences and user groups on a variety of topics. Raymond can be reached at his blog (www.raymondcamden.com), @raymondcamden on Twitter, or via email at raymondcamden@gmail.com.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Segment 1: Beginning Vue.js (65 min total)

  • Why/What/How Vue.js? (15 min)
  • Vue Basics (20 min)
  • Exercise 1 – Palindrone Checker (10 min)
  • Exercise 2 – Ajax Search (10 min)
  • Break+Q/A (10 min)

Segment 2: Building Components (45 min total)

  • What are components? (5 min)
  • Working with Properties and Events (10 min)
  • Working with Slots (10 min)
  • Exercise 1 – Music Component (10 min)
  • Break+Q/A (10 min)

Segment 3: Routing (25 min)

  • Working with Routing (10 min)
  • Exercise 1 – Master/Detail (10 min)
  • Q/A (5 min)

Segment 4: State Management with Vuex (40 min)

  • What’s a store? What’s Vuex? (5 min)
  • Working with Stores (20 min)
  • Exercise 1 – Cat Store demo (10 min)
  • Break+Q/A (5 min)

Segment 5: Building Apps with the CLI (30 min)

  • What the CLI does + Installing (5 min)
  • Generating an App (10 min)
  • Resources (5 min)
  • Final Q/A (10 min)