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>     </div>   </form> </div>

We have a box for the title, one for the body of our new post, and a button to send our post.

In our Vue instance, those three things along with a user ID will be part of the state of the app:

new Vue({   el: '#app',   data: {     userId: 1,     title: '',     body: ''   } })

At this point, we ...

Get Vue.js 2 Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.