Vue Forms
Lesson 1 of 1
  1. 1
    Welcome to Vue Forms! In Vue Data , you learned how to store dynamic data and methods on Vue instances and then display that data using mustache templates. In this lesson, you will learn how to us…
  2. 2
    In Vue Data , we learned that there are two main places to store dynamic data in Vue apps: data for known dynamic values and computed for dynamic values that are determined using other dynamic val…
  3. 3
    An interesting example of a slightly more complex form field is radio buttons. Radio buttons are a series of buttons where the user can only select one. When a different button is selected, the pre…
  4. 4
    Another interesting form field example is checkboxes. Checkboxes are used in situations where users can select multiple options for a form field. Unlike radio buttons, previous selections won’t be …
  5. 5
    You may not always use a list of checkboxes. Sometimes you may only need a single checkbox to indicate whether a user has or has not checked a single option. In this case, we need to change the typ…
  6. 6
    As you may have seen previously in your learning journey, every web app experience consists of a series of events and responses to those events. Everything that can happen in a web app, from a user…
  7. 7
    If you have prior front-end development experience, you might have some familiarity with common event-handling boilerplate. If not, don’t fret — Vue has you covered! In order to ensure a gr…
  8. 8
    Modifiers are incredibly useful tools for quickly adding essential front-end logic to directives. Vue offers modifiers for many of their directives, including the main topic of this lesson: v-model…
  9. 9
    There is one last piece of functionality we must cover to round out your Vue form knowledge — validation. Form validation is the process in which we ensure all required information has been …
  10. 10
    Congratulations, you now know how to bind HTML forms to Vue data and listen to events in Vue! Let’s review the major takeaways from this lesson: - Form fields can be bound to Vue data using the v-…

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo