Vue.js 2 Design Patterns and Best Practices

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