O'Reilly logo
live online training icon Live Online training

Getting Started with Vue.js

Learning Vue.js the right way

Juan Vega

Websites have come a long way since the advent of the internet. No longer simple pages with information plastered on the screen, websites are now heavily interactive and can contain large amounts of information and images—and there are full-featured applications online that can accomplish even more. As a result, companies are looking to highly performant tools and frameworks to ensure that they are offering the best experience to users.

Vue.js is one of the fastest growing frameworks on the market. It's fast, performant, and easy to learn and offers many of the same features as other top frameworks, with a simpler learning curve. Join expert Juan Vega to learn the fundamentals of the Vue.js framework. You'll leave with a firm grasp of the basics of Vue.js and ready to start using Vue.js to create your own applications.

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

By the end of this live online course, you’ll understand:

  • Fundamental Vue concepts like the Vue instance, Vue template syntax, and the Vue component lifecycle
  • How to use Vue components, including directives, props, and slots
  • How to pass data and use data binding

And you’ll be able to:

  • Install Vue.js on any current web application
  • Create re-usable components for use in Vue.js web applications
  • Use Vue.js directives to enhance functionality on web applications
  • Create a full Vue.js application from scratch

This training course is for you because...

  • You're a software engineer who wants to learn how to use Vue.js.

Prerequisites

You're a software engineer who wants to learn how to use Vue.js.

Materials or downloads needed in advance:

  • Users will need to have an text editor installed, which will be done as part of the course. They will learn how to install Sublime Text 3. All other material that will be needed will be provided, such as the link for the Vue.js cdn. Students should not have to worry about having anything pre-installed. Also, this is assuming that they all have a modern browser, such as Google Chrome, and a good internet connection.

Recommended preparation:

JavaScript Best Practices: Writing Modular JavaScript (Learning Path)

JavaScript Best Practices: Styling & Syntax (Learning Path)

About your instructor

  • Juan Vega is a systems programmer at BBVA Compass, where he recently developed the company's credit card activation application and is currently spearheading a new project. Over his career, Juan has worked for global banking groups, multinational consulting firms, and large state universities. One of his past accomplishments was completing a full overhaul of both the Clealabama.com and Law.ua.edu websites for the University of Alabama. Juan is a passionate software professional focused on software development, deployment, and testing. He has written two popular articles on React.js and Vue.js on Medium and is the second-most-viewed writer about Vue.js on Quora—his answers have been featured in the Quora Digest multiple times.

Schedule

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

Introduction and environment setup (20 minutes)

  • Lecture and hands-on exercise: Set up directory; install Sublime Text 3; create an index.html file; install Vue.js via CDN; create an app.js file; include the Vue.js file and the app.js file in the index.html file.

The Vue instance (25 minutes)

  • Lecture: Creating a Vue instance; the Vue Constructor; Vue.js properties; the Vue.js lifecycle and lifecycle hooks
  • Hands-on exercises: Create a simple Vue instance in an app.js file; add properties to your custom instance in an app.js file; add a test hook in your Vue instance to show the lifecycle

Break (10 minutes)

Vue components (30 minutes)

  • Lecture: Registration; props; slots; events; data
  • Hands-on exercises: Create a button component to demonstrate usage; pass properties into the component; pass custom information into the component; attach a custom event to show usage; display test data to show usage and explain how data is different from the constructor

Vue template syntax (25 minutes)

  • Hands-on exercise: Create a form component; demonstrate the form component by applying it to index.html; sync the form component with the button component

Break (10 minutes)**

Creating your Vue.js application** (60 minutes)

  • Hands-on exercise: Create a hotel reservation app that allows users to create or delete rooms, using only HTML, CSS, and Vue.js