# ToDo リストを作りながら学習しよう! をやってみた 📝

ToDo リストを作りながら学習しよう! | 基礎から学ぶ Vue.js を見ながら、 ToDoリスト を作ってみた。

# メモ

# localStorage

STEP2 ローカルストレージ API の使用 - ToDo リストを作りながら学習しよう! | 基礎から学ぶ Vue.js

  • クライアント側にデータを保有できる
  • WebStorage

# ref

STEP6 フォーム入力値の取得 - ToDo リストを作りながら学習しよう! | 基礎から学ぶ Vue.js

ref と書いておくと、

<input type="text" ref="hogehoge" />

method で、input タグに入力した値を取れる。

this.$refs.hogehoge.value

# Fetch API

  • リクエストやレスポンスといった HTTP のパイプラインを構成する要素を操作できるようになる

# DOM

  • 文書をノードとオブジェクトで表現する
  • 文書を表現、保存、操作する方法

# リアクティブ

  • 反応的な という意味
  • データが変化すると他のところも同じように変化する??

# ライフサイクルフック

  • あらかじめ登録した処理を、 Vue インスタンスの特定のタイミングで自動的に呼び出す仕組み

# .ctrl

STEP10 状態の変更と削除の処理 doRemove メソッド(削除)- ToDo リストを作りながら学習しよう! | 基礎から学ぶ Vue.js

つづいて削除ボタンもハンドルします。 「削除」は注意するべき操作のため、キー修飾子 .ctrl を使って「コントロールキーを押しながらクリック」しなければ呼び出されないようにします。

<button v-on:click.ctrl="doRemove(item)">
  削除
</button>

Mac だからかわからないけど、コントロールキーを押しながらクリックしても呼び出せなかったです。

# watch

  • 監視するデータの変化に応じて、登録しておいた処理を自動的に行う

# created

  • ライフサイクルフックの 1 つ
  • インスタンスが作成され、リアクティブ周りの初期化が終わった後に呼び出される

# computed

  • 算出プロパティ、データから別の新しいデータを作成する関数型のデータ
  • 元のデータに変更があるまで、結果をキャッシュしてくれる

# 参考🔗