Vue.js: Working With Forms & Unit Testing

Vue.js 2.6    |    Beginner
  • 15 videos | 59m 41s
  • Includes Assessment
  • Earns a Badge
Vue.js, a Javascript front-end framework that is lightweight, flexible, progressive, is easy to set up to quickly start creating apps. In this 15-video course on important aspects of Vue.js, learners see how to use the V-Model directive to set up two-way data binding between Form Inputs and locally managed data. Then you will learn to work with FormData in Vue to construct a set of key/value pairs. Next, the course demonstrates how to install the necessary tools for unit testing, and how to create and run teAPI. You will learn to use Jest, a JavaScript unit testing tool; how to stub certain Vue containers as part of setting up unit tests; and examine mixins (Cascading Style Sheet properties similar to functions) and global mixins to define and distribute reusable bits of logic among the app's components. You will learn to use built-in and custom directives in Vue to add to templates. Finally, learners will see that custom filters are a way to apply common formatting to text and return an output.

WHAT YOU WILL LEARN

  • Identify the subject areas covered in this course
    Use v-model to perform two-way data binding in a vue app
    Use modifiers to cast model data into an expected format
    Bind to the submit method of a form element and respond in vue
    Validate form data according to business requirements
    Set up unit testing using the vue cli
    Create and run a unit test against a vue component
    Re-run unit tests automatically on save
  • Reuse app logic using mixins
    Set up global mixins in a vue app
    Use vue-provided directives in apps
    Create and use custom directives
    Set up and use filters in vue
    Create and use custom filters
    Create a vue component, add form elements, inputs, and buttons, and display alerts

IN THIS COURSE

  • 1m 36s
  • 4m 34s
    During this video, you will learn how to use v-model to perform two-way data binding in a Vue application. FREE ACCESS
  • Locked
    3.  Typecasting v-model Data
    3m 12s
    In this video, learn how to use modifiers to format model data as expected. FREE ACCESS
  • Locked
    4.  Submitting Form Data
    4m 27s
    In this video, learn how to bind to the submit method of a form element and respond in Vue. FREE ACCESS
  • Locked
    5.  Validating Form Data
    6m 38s
    In this video, you will learn how to validate form data to meet business requirements. FREE ACCESS
  • Locked
    6.  Configuring Unit Testing in Vue
    3m 6s
    In this video, you will learn how to set up unit testing using the Vue CLI. FREE ACCESS
  • Locked
    7.  Unit Testing a Component
    3m 3s
    In this video, you will learn how to create and run a unit test against a Vue component. FREE ACCESS
  • Locked
    8.  Using Watchers with Unit Tests
    4m 1s
    In this video, you will learn how to automatically re-run unit tests on save. FREE ACCESS
  • Locked
    9.  Using Mixins
    5m 8s
    In this video, you will learn how to reuse app logic using mixins. FREE ACCESS
  • Locked
    10.  Global Mixins
    3m 52s
    In this video, you will learn how to set up global mixins in a Vue app. FREE ACCESS
  • Locked
    11.  Using Directives
    5m 5s
    Find out how to use directives provided by Vue in apps. FREE ACCESS
  • Locked
    12.  Creating Custom Directives
    5m 39s
    Learn how to create and use custom directives. FREE ACCESS
  • Locked
    13.  Using Filters
    3m 1s
    In this video, you will learn how to set up and use filters in Vue. FREE ACCESS
  • Locked
    14.  Creating Custom Filters
    3m 27s
    In this video, you will learn how to create and use custom filters. FREE ACCESS
  • Locked
    15.  Exercise: Creating Vue-Based Forms
    2m 52s
    In this video, you will learn how to create a Vue component, add form elements and inputs, buttons, and display alerts. 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: Getting Started
Book Pro Angular: Build Powerful and Dynamic Web Apps, Fifth Edition
Course Build Apps Using React: Introducing React for Web Applications

PEOPLE WHO VIEWED THIS ALSO VIEWED THESE

Course Angular 11: Getting Started with Angular
Course Vue.js: Getting Started
Course Vue.js: Working with Vue State & Data