算出プロパティとウォッチャ
この演習で学習する内容
- 算出プロパティ
- ウォッチャ
演習内容
最初のステップ
苗字と名前を<input type="text">タグで入力して、氏名を表示するアプリケーションを作成してみましょう。
dataオプションは以下のようにデータを持ち、それぞれ対応する<input type="text">タグのvalue属性と同期するよう双方向データバインディングしてください。
firstName: 苗字lastName: 名前
最初のステップが終わったら
作成したらこれをベースに、以下のケースで、氏名(フルネーム:fullName)を<p>タグに表示できる、<input type="text">タグの入力でリアルタイムに氏名が変わるアプリケーションを作成してみましょう。
- メソッド (
methods) - 算出プロパティ (
computed) - 監視プロパティ (
watch) - ウォッチャ (
$watch)
完成したら、これらがどう違うのか比較してみましょう。