ディレクティブ
この演習で学習する内容
- ディレクティブを使ったテキストレンダリング
- ディレクティブを使ったイベントハンドリング
- ディレクティブを使ったデータバインディング
演習内容
<input type="text">タグの入力イベントinputをハンドリングして、入力の都度<p>タグに入力内容が表示されるようにしてみましょう。
その際、入力値の<p>タグへのレンダリングは、Mustache構文ではなく、Vue.jsが提供するディレクティブを利用してください。
また、<input type="text">タグのvalue属性には、入力値を保持したデータを反映させるようにしてください。
Chrome DevToolsのコンソールでvm.message = '...'にようしてVueインスタンスのデータに何らかしら文字列を設定してみてください。<input type="text">タグの入力内容はどうなるでしょう？