自分なりの解釈 今日は1からなるべくノーヒントで０からGoogleBooks APIを使用したSPAの開発に挑戦 少し躓いたところを忘備録として記録します。 親側からpropsを使用したdataの受け渡しを行う際は画面描画が終わってから子側のdataに代入する。 その際に使…

自分なりの解釈 今日は1からなるべくノーヒントで０からGoogleBooks APIを使用したSPAの開発に挑戦 少し躓いたところを忘備録として記録します。 親側からpropsを使用したdataの受け渡しを行う際は画面描画が終わってから子側のdataに代入する。 その際に使…

自分なりの解釈 Google books apiを使用したSPAの作成 今日学習した処理の流れ 子側のコンポーネントから親側のコンポーネントに$emitを使って値を渡す。 親側は渡された値を参考にメソッドでdataを作成。 作成後、別のコンポーネントへpropsを使用してdata…

振り返り 今日は何も見ずにGoogle Books APIsを使用してデータの取得、vuetifyを使用してのデータの表示、コンポーネント間でのデータのやり取り、ローカルストレージへのデータ保存の実装に挑戦。 Google Books APIsを使用してデータの取得 特につまること…

今まであまり意識する機会がなかった処理速度について少し調べました。 ほとんどの内容は今の自分にはまだまだ理解できない部分でしたが、その中でも気づきがあった部分のみ忘備録として記録します。 i.nil? は i == nil より4倍から5倍近く処理が早い。 nil…

自分なりの解釈 コンポーネントを跨いでデータをローカルストレージに保存する流れ 子側のコンポーネントから親側に値を渡してローカルストレージに保存する必要がある。 子側から値を渡すためにthis.$emit('任意のイベント名', 渡したい値)とする。 親側でr…

自分なりの解釈 googlebook APIを使ってデータを取得後表示するまでの流れ vuetifyのv-text-fieldコンポーネントにv-modelで入力値をdataと紐付ける v-btnタグで検索ボタンを作成しクリックで検索メソッド発火 検索内容のkeywordをURLに組み込む必要がある …

自分なりの解釈 用意していないURLへのアクセス index.jsのroutesのオブジェクトに path '*'を追加する。*を追加することで指定していないすべてのpathを表す。 redirectで遷移先を指定するか、存在しないページ用のコンポーネントを作成して指定する。 こう…

自分なりの解釈 Vue Routerを初めて触ったイメージ webページに見立てたコンポーネントをリクエストに応じて<router-view/>の部分を差し替える。 差し替えるだけだから動作が軽く高速。 処理の流れはrouter-linkタグならto=""で指定されたViewコンポーネントがrouterフォル</router-view/>…

自分なりの解釈 vue-cliを使用したマルチページモード 流れとしては エントリーポイントをページ毎に作成する vue.config.jsファイルに追記 pages: { index: { entry: 'src/index/main.js', template: 'public/index.html', filename: 'index.html', title: …

自分なりの解釈 Vue-cli npm run serverでサーバーを立ち上げようとするとエラーが発生 Component name "Index" should always be multi-word との記載あり。 コンポーネントの名前は二語以上繋げて命名するべきと書いてあるっぽい ESLintでの設定でエラーを…

自分なりの解釈 Vue CLI 初めてVue CLIを使用してファイルを作成してみるとVScodeの一行目にwarningの波線が発生。 babel.config.jsが読み込まれず混乱しているのが原因のようです。 VScodeのsetting.jsonに "eslint.workingDirectories": [ {"mode": "auto"…

自分なりの解釈 コンポーネントフォームでのやり取り v-model使用 ゴールはコンポーネントで作成したフォームの入力値を親側で受け取ること。 そのために、コンポーネントのテンプレートの中で入力値を監視するためにv-modelでcomutedの処理と紐付けてセッタ…