Creating a form and sending data to your server

HTML forms are a standard way to interact with your user. You can gather their data to register within the site, make them log in, or even carry out more advanced interactions. In this recipe, you will build your first form with Vue.

Getting ready

This recipe is very easy, but it assumes that you already know about AJAX and you want to apply your knowledge on Vue.

How to do it...

Let's pretend that we have a blog, and we want to write a new post. For that, we need a form. Here is how you lay out the HTML:

<div id="app"> 
  <h3>Write a new post</h3> 
  <form> 
    <div> 
      <label>Title of your post:</label> 
      <input type="text" v-model="title"> 
    </div> 
    <div> 
      <label>Write your thoughts for the day</label> 
      <textarea v-model="body"></textarea> 
    </div> 
    <div> 
      <button @click.prevent="submit">Submit</button...