宣言的にデータを DOM に描画

{{ message }}

コンソールで

app.message = 'データを変更しました!'

と入力してみましょう。描画が更新されるのが確認できるでしょう。

v-bind

ここにマウスをのせてしばらくすると、title属性のメッセージが表示されます。

コンソールで

app2.message = '新しいメッセージ'

と入力してみましょう。束縛されたHTML（このケースでは title 属性）が更新されるのが確認できるでしょう。

v-if

trueなのでこの文が見えます。

コンソールで

app3.seen = false

と入力してみましょう。メッセージが消えるはずです。

v-for

1. {{ todo.text }}

コンソールで

app4.todos.push({ text: 'New item' })

と入力してみましょう。リストに新しいアイテムが追加されたはずです。

v-on

{{ message }}

Reverse Message

v-model

{{ message }}

新しいコンポーネントを定義

今回はkey属性の必要性など感じなかったです。「vue key属性」と検索すると、書くときと書かないときの違いが書かれています。