Vue - The Complete Guide (Udemy) １２章・１３章フォームとリクエストについての要約！

教材　Vue - The Complete Guide (w/ Router, Vuex, Composition API)

理解を深めるために簡単なメモを作成しました。早くしっかりと実装できるようになりたい！

session 12　フォーム

• 140 入力されたデータを取得する方法は、主に２つ！
  • 独自のカスタム入力イベントリスナーを作成する方法
  • v-modelを使用する方法。
• 141 入力するデータの型を指定する方法！
  • v-モデルを使用を使用すると、型の指定画できる。 　デフォルトのJavaScriiptの検証画面に表示されるものは、すべて文字列として表示されるようである。しかし、Vueを使えば、簡単に型指定ができて後でDBを使用する時に簡単に操作画できる。
• 142 vモデルとドロップダウン
• 143ラジオボックスとラジオバタンでのvモデルの使用
  • typeで任意の形に表示を変更する。
  • あたり前だが、入力したあとはnullに戻す。そうしないと前のデーが残ってしまうみたい。
  • 配列にしてデータを保存しないと全部選択されてしまう！[]で指定して上げれば良い。
  • valueの値は項目ごとに作成しないといけない。
  • グループで管理されている入力データ軍と単体で管理されている入力データ軍が存在している。
  • 単体は、もともとを真偽で設定して置き、デフォルトの設定は偽にしておき、入力されると真になるように設計を行う！
• 144 フォームの検証の機
  • @blurと設定をすると、blurイベントは、要素がフォーカスを失ったときに発生します。このイベントと focusout との違いは、 focusout がバブリングを行うのに対し blur は行わないことです。 Element: blur イベント
  • 新しくフォームを入力する場合は、メソッドを作成しそこに入力される値が正しいのかを検証する必要がある。
  • 145　カスタムコンポーネントの実装
  • 手順
    1. 新規コンポーネントの作成
    2. 親で新規コンポーネントをimportとcomponetしてあげる。
    3. 選択を強調したいのなら、新規クラスを作成して、色をつけるようなクラスを作成する。
    4. 他の値が入らないようにv-bindで正しい入力かどうかを判定して上げるようにする。
• 146カスタムコンポーネントで、v-modelを使用する方法！
  • modelValueを使用して、カスタムコンポーネントに使用して同期する。ここの範囲は、とても難しいので一度では理解ができない。他の本などを読んで理解したら再度取り組んで見よう。

Session 13 httpリクエスト

• 149 ローカル環境での開発から離れるための概要の説明
• 151　Fiarebaseの説明 goggleのサービスで、バックエンドで行う機能を提供してくれるサービス。リアルタイムでデータ同期ができることがいいところ。
• 152　httpリクエストを送信方法について
  • axiousのおすすめ　サードパーティー製のパッケージのようだが、かなり使いやすいみたいである。httpリクエストを行ってくれる。
  • fetch();について。データを送受信するためのメソッド。ここにUrlを書けばいい。
  • 153 データを保存するためのpostの送信
  • firebaseにデータを送信するための、書き方を説明
  • JSONデータとして、送信しないと行けない。
  • 156 データの取得(Get)と応用データの変換
  • fetch()でデータの入力をとってくるように記述する。
  • response.okがokだったら.jsonデータを取得できるように記載する。
  • 失敗に終わったら、エラー文を送信してくれるように処理書くようにする。
  • 157 コンポーネントをマウントする時のデータを取得方法。 -　ローカル環境をisLoading = flaseに 常に観ているのではなくてリクエストが来たら動くように改良を重ねる。その後にリセットを行う。
  • 158 データなしの状態での書影 -　if文を書いて、中身がなかったらどうするかの処理を記載するようにする。
• 160 ブラウザ側のエラーを解決する方法！
  • console.log(error)という風に記載をすれば、errorがはけるようになる。
  • 161 サーバーサイドのエラー文を読み解く方法