6/2 Vue.js
自分なりの解釈
Vue CLI
初めてVue CLIを使用してファイルを作成してみるとVScodeの一行目にwarningの波線が発生。
babel.config.jsが読み込まれず混乱しているのが原因のようです。
"eslint.workingDirectories": [ {"mode": "auto"} ]
を追記することで無事解消できました。
コンポーネントファイルのファイル名は頭文字を大文字にした方がよい。
一つのファイルに
tempateタグでHTML
scriptタグにJavaScript
styleタグにcssを記述して一塊の部品を作るようなイメージ
その部品たちを組み合わせながら効率的にWEBページを作成する。
styleタグにscopedと追記することでそのファイル内のHTMLタグに識別番号が振られてstyleタグ内に記述したCSSはそのファイル内のHTMLタグにの適用される。
この仕組みを利用することで他のファイルで設定したclassのCSSが別のファイルのHTMLタグに適用されてしまうことを防げる。
Vutify グリッドシステム
適応範囲を12分割しつつそのうちの何コマを使うかタグないで指定する。
また、予め決められたブレークポイント毎に何コマ使用するか変更することもできる。
これによりCSSの記述を減らしつつレスポンシブに対応することができる。
vutifyを使用しつつ非同期でAPIから犬の画像を取得して表示する処理の流れ
v-btnをv-forでdataの値を表示するボタンをdataの中身の数だけ表示する。
ボタンには非同期通信のメソッドが発火するようにしておく。
メソッドで非同期通信を実行
返り値の画像のURLをdataの値に格納
画像のURLのdataをv-forで展開しつつv-imgのsrcに渡ことで画像が表示される。
JavaScriptの関数の処理を追いかけるのが難しいと感じる。
もっと触れて素早く理解できるように学習を進める。
