ToDo リストを作りながら学習しよう！ をやってみた
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
- 算出プロパティ、データから別の新しいデータを作成する関数型のデータ
- 元のデータに変更があるまで、結果をキャッシュしてくれる
