Data Binding, Form Validations, Events, and Computed Properties

Data is the most valuable asset in the world right now, and knowing how to manage it is a must. In Vue, we have the power to choose how we can gather this data, manipulate it as we want, and deliver it to the server.

In this chapter, we will learn more about the process of data manipulation and data handling, form validations, data filtering, how to display this data to the user, and how to present it in a way that is different from what we then have inside our application.

We will learn how to use the vue-devtools to go deep inside the Vue components and see what is happening to our data and application.

In this chapter, we'll cover the following recipes:

• Creating the "hello world" component
• Creating an input form with two-way data binding
• Adding an event listener to an element
• Removing the v-model from the input
• Creating a dynamic to-do list
• Creating computed properties and exploring how they work
• Displaying cleaner data and text with custom filters
• Adding form validation with Vuelidate
• Creating filters and sorters for a list
• Creating conditional filtering to sort list data
• Adding custom styles and transitions
• Using vue-devtools to debug your application