One of the most common requirements for any business application is text input. Vue assists us with this need with the v-model directive. It allows us to create reactive two-way data bindings on form input events, making working with forms easily. It's a welcome abstraction over what would otherwise be a tedious way to get form values and input events. To explore this, we can create a new Vue project:
# Create a new Vue project $ vue init webpack-simple vue-model # Navigate to directory $ cd vue-model # Install dependencies $ npm install # Run application $ npm run dev
We can head over to our root App.vue file and remove everything from the template and instead add a new div that encompasses a label and form input:
<template> <div id="app"> <label>Name:</label> <input type="text"> </div> </template>
This gives us the ability to add text to our input element, that is, prompting the user to input their name. I'd like to capture this value...