Vue.js 3 Essential Training

Vue.js 3 Essential Training

5h 8mIntermediate2021-01-22

Authors

Ray Villalobos

Ray Villalobos

Senior Staff Instructor at LinkedIn Learning

Course details

Vue.js offers developers a framework for building applications that lets them choose how deeply they want to apply the framework. In this course, instructor Ray Villalobos explores the fundamentals of Vue.js 3, then covers options for rendering, computing values, and creating components. Ray shows you how to install Vue.js 3 and set it up. He walks you through using templates, then goes into properties that enhance the way the library works. He discusses arrays and objects, as well as how to create dynamic classes with expressions. He goes into transitions, then steps you through creating components and component events. He demonstrates what you get when you install a project with the Vue CLI, including how to install the Vue Router. He shows you how to set up and build a real project, then goes into enhancing your app so you can feel more comfortable with the application API. In conclusion, Ray explains how to add new features to your application.

Skills covered

Vue.jsJavaScript FrameworksJavaScriptOracleEssential TrainingWeb DevelopmentOpen Source

Concepts

Introduction

  • What you should learn about Vue.js
  • Using the exercises for this course

Getting Started

  • Installation options
  • Basic setup
  • Binding with directives
  • Rendering lists
  • Conditional data

Managing Reactivity

  • Input fields
  • Computed content
  • Event handling
  • Lifecycle hooks

Styles and Animation

  • Inline styles
  • Classes
  • Transitions
  • Options and animating lists

Using Components

  • Basic components
  • Component events
  • Slots

Understanding the CLI

  • Application API
  • Installing with the Vue CLI
  • Overview of installation
  • Vue project files

Creating a Real Project

  • Setting up a realistic app
  • Modules and routing
  • CodePen to app
  • Emitting updates

Refactoring CodePen

  • Reorganizing hierarchy
  • Refactoring navigation
  • Moving components
  • Moving the drop-down

Adding Features

  • Modifying the cart
  • Deleting items
  • Programming a checkout page

Conclusion

  • Next steps
100,000 Toman