Model

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...