Vue.js: Working with Components

Vue.js 2.6    |    Beginner
  • 11 videos | 53m 27s
  • Includes Assessment
  • Earns a Badge
Explore more facets of Vue.jsm, a Javascript front-end framework that is lightweight, flexible, progressive, and easy to set up, to quickly start creating apps in this 11-video course. You will review how to install Vue, set up a Vue environment for development, and how Vue handles common front-end necessities such as styling, routing, and state management. This course demonstrates how to create components in Vue which have reusable elements that encapsulate a functionality, and in it you will learn to use single-file components. You will explore parent-child components and how to transfer data between them. You will learn to use Vue slots to create reusable components that can define their own templates, and how to use slots to pass in dynamic content to components. Learners will examine how computed properties in Vue help to keep templates free from bloated expressions and overly complex logic, and optimize performance in the app. Finally, you will learn how Vue instances fire several lifecycle hooks and notable points.

WHAT YOU WILL LEARN

  • Describe the differences between global and local components in vue
    Create new single file components for use in vue apps
    Structure vue apps to make use of parent and child components
    Use props to pass data from parent to child components
    Validate any props passed from parent to child components
  • Emit events that can pass data from child to parent components
    Pass in dynamic content to components via slots
    Use computed properties to provide data in a vue app
    Tap into the various lifecycle events of a component via hooks
    Pass props and emit events to communicate between components

IN THIS COURSE

  • 1m 38s
  • 8m 17s
    After completing this video, you will be able to describe the differences between global and local components in Vue. FREE ACCESS
  • Locked
    3.  Creating a Single File Component
    4m 54s
    Find out how to create new single-file components for use in Vue apps. FREE ACCESS
  • Locked
    4.  Working with Child Components
    3m 45s
    In this video, you will learn how to structure Vue apps to make use of parent and child components. FREE ACCESS
  • Locked
    5.  Passing Data to Child Components
    4m 3s
    Find out how to use props to pass data from parent to child components. FREE ACCESS
  • Locked
    6.  Validating Props Passed to Child Components
    5m 14s
    During this video, you will learn how to validate props passed from parent to child components. FREE ACCESS
  • Locked
    7.  Passing Data to Parent Components
    7m 52s
    In this video, learn how to emit events that can pass data from parent to child components. FREE ACCESS
  • Locked
    8.  Using Slots to Pass Content
    5m 31s
    In this video, you will pass dynamic content to components via slots. FREE ACCESS
  • Locked
    9.  Using Computed Properties
    4m 33s
    In this video, find out how to use computed properties to provide data in a Vue app. FREE ACCESS
  • Locked
    10.  Using Component Lifecycle Hooks
    4m 45s
    In this video, you will learn how to tap into the various lifecycle events of a component using hooks. FREE ACCESS
  • Locked
    11.  Exercise: Using Component Communication in Vue
    2m 55s
    In this video, you will learn how to pass props and emit events to communicate between components. FREE ACCESS

EARN A DIGITAL BADGE WHEN YOU COMPLETE THIS COURSE

Skillsoft is providing you the opportunity to earn a digital badge upon successful completion on some of our courses, which can be shared on any social network or business platform.

Digital badges are yours to keep, forever.

YOU MIGHT ALSO LIKE

Course Vue.js: Component Communication & Routing
Book Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch
Book Building Native Web Components: Front-End Development with Polymer and Vue.js

PEOPLE WHO VIEWED THIS ALSO VIEWED THESE

Course FSD Front-end Development: Testing Tools
Course Vue.js: Working with Vue State & Data
Course Front-end Apps: Presentation with JSF