Learn
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-model
directive — howv-model
is used depends on the type of field it is being added to - Form event handlers can be added using
v-on:submit
andv-on:reset
- Modifiers can be used to add functionality to directives — most importantly preventing page reload on form submission using
v-on:submit.prevent
and cleaning up form field values using.number
and.trim
- Form validation can be implemented by setting the value of the
disabled
attribute on a<button>
to the value of a computed property usingv-bind
Good job on tackling all of this material! You can now create a pretty significant front-end using Vue. You should be proud of how far you’ve come in such a short period of time. Good work!
Sign up to start coding
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.