Vue.js 2 Web Development Projects

The note editor

Now that we have our app running, let's add the text editor. We will use a simple textarea element and the v-model directive we saw in Chapter 1, Getting Started with Vue.

Create a section element and put the textarea inside, then add the v-model directive bound to our content property:

<!-- Main pane -->
<section class="main">
  <textarea v-model="content"></textarea>
</section>

Now, if you change the text ;inside the note editor, the value of content should automatically chance in the devtools.

The v-model directive is not limited to text inputs. You can also use it in other form elements, such as checkboxes, radio buttons, or even custom components, as we will see later in the book.