When building web applications, there is always the possibility of working with forms. Learning to handle them as you work with different tools is very important. In this tutorial, you will see how to handle forms in Vue.js.
Create a new Vue project using Vue-CLI. If you do not have Vue-CLI installed on your machine, you can do so by running:
npm install -g vue-cli
That will install Vue-CLI globally on your machine. You can go ahead to create the project by running:
vue init webpack vue-forms
That will create a new Vue project, using the Webpack template. Navigate to the directory that was created for the project, and install the dependencies.
cd vue-forms npm install
You will be making use of Bootstrap in this tutorial. Open your index.html file and make it look like this.
#index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue-forms</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></head> <body>/dist/build.js </body> </html>
Nothing fancy here—just the link element tag for our Bootstrap stylesheet. You will build a simple registration form from scratch, and bind the values entered into the form using v-model. When working with forms in Vue.js, you bind form input values to the Vue instance using the
Let’s get started with some simple text input to collect the email address, password, and age of the user. Open up your App.vue file.
Edit the template section to look like what I have below.