Vue.js: Component Communication & Routing

Vue.js 2.6    |    Beginner
  • 16 videos | 1h 14m 37s
  • Includes Assessment
  • Earns a Badge
Rating 4.0 of 18 users Rating 4.0 of 18 users (18)
This course continues exploring Vue.js, a JavaScript front-end framework that is lightweight, flexible, progressive, and easy to set up for creating apps. In this 16-video course, learners see how to perform client-side routing, how to apply styling, and examine several approaches to styling in Vue apps. You will learn to assign and reassign both class and style bindings to the app elements. Next, the course demonstrates how to use CSS pre-processes, and to bind two CSS styles and classes in an app. You will learn how to create and use routes in a Vue app. You will learn to write programmatically, and how to create routes that can accept dynamic parameters. Learners see how to use Veux, a state management pattern and library in Vue, and how to work with remote APIs (application programming interface) using the Axios HTTP client service. Finally, you will see how to stop a bay from loading initially, and stop navigation away from a page by using route guards.

WHAT YOU WILL LEARN

  • Discover the subject areas covered in this course
    Use style and class binding in vue
    Bind to css styles in a vue app dynamically
    Bind to css classes in a vue app dynamically
    Use css preprocessing in a vue app
    Install the vue-router and configure routing in a vue app
    Use the router-view directive to render routed components
    Use router-link to trigger routing in a vue app
  • Trigger route navigation programmatically in a vue app
    Create routes that accept dynamic parameters
    Configure a route to pass parameters as props
    Use multiple router-view elements in a vue app
    Assign names to router-views and display multiple views at once
    Stop a page from loading using a route guard
    Stop navigation away from a page using a route guard
    Define and use client side routing in a vue app

IN THIS COURSE

  • 2m
  • 3m 42s
    In this video, find out how to use style and class binding in Vue. FREE ACCESS
  • Locked
    3.  Using Style Binding
    3m 51s
    In this video, learn how to bind CSS styles dynamically in a Vue app. FREE ACCESS
  • Locked
    4.  Using Class Binding
    5m 19s
    In this video, you will learn how to bind CSS classes dynamically in a Vue app. FREE ACCESS
  • Locked
    5.  Using CSS Preprocessors
    3m 33s
    In this video, you will use CSS preprocessing in a Vue.js app. FREE ACCESS
  • Locked
    6.  Installing Routing in Vue
    4m 58s
    In this video, find out how to install the vue-router and configure routing in a Vue app. FREE ACCESS
  • Locked
    7.  Using Routes in a Vue App
    3m 46s
    In this video, learn how to use the router-view directive to render components that have been routed. FREE ACCESS
  • Locked
    8.  Working with Router Links
    6m 32s
    During this video, you will learn how to use the router-link component to trigger routing in a Vue app. FREE ACCESS
  • Locked
    9.  Routing Programmatically in Vue
    4m 46s
    In this video, you will learn how to trigger route navigation programmatically in a Vue app. FREE ACCESS
  • Locked
    10.  Using Route Parameters
    5m 21s
    In this video, learn how to create routes that accept dynamic parameters. FREE ACCESS
  • Locked
    11.  Passing Route Parameters as Props
    5m 55s
    During this video, you will learn how to configure a route to pass parameters as props. FREE ACCESS
  • Locked
    12.  Working with Nested Routes
    5m 47s
    In this video, you will learn how to use multiple router-view elements in a Vue app. FREE ACCESS
  • Locked
    13.  Using Named Views
    5m 50s
    Learn how to assign names to router-views and display multiple views at the same time. FREE ACCESS
  • Locked
    14.  Using Route Guards to Stop Page Loading
    4m
    In this video, learn how to stop a page from loading using a route guard. FREE ACCESS
  • Locked
    15.  Using Route Guards to Stop Away Navigation
    5m 46s
    In this video, you will learn how to use a route guard to prevent navigation away from a page. FREE ACCESS
  • Locked
    16.  Exercise: Routing Vue Apps
    3m 31s
    In this video, you will learn how to define and use client side routing in a Vue app. 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

Book Practical Next.js for E-Commerce: Create E-Commerce Sites with the Next.js Framework
Course Angular 11: Introduction to Components
Rating 4.6 of 265 users Rating 4.6 of 265 users (265)
Journey Developing Interactive Sites with JavaScript
Rating 5.0 of 1 users Rating 5.0 of 1 users (1)

PEOPLE WHO VIEWED THIS ALSO VIEWED THESE

Course Angular 11: Getting Started with Angular
Rating 4.5 of 560 users Rating 4.5 of 560 users (560)
Course Vue.js: Working With Forms & Unit Testing
Rating 4.3 of 15 users Rating 4.3 of 15 users (15)
Course Vue.js: Working with Vue State & Data
Rating 4.7 of 13 users Rating 4.7 of 13 users (13)