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