6/7 Vue.js
自分なりの解釈
用意していないURLへのアクセス
index.jsのroutesのオブジェクトに
path '*'を追加する。*を追加することで指定していないすべてのpathを表す。
redirectで遷移先を指定するか、存在しないページ用のコンポーネントを作成して指定する。
こうすることで意図しないURLへのアクセスに予め準備したコンポーネントを表示することができる。
ルートのネスト化
railsのルーティングのネストと同じようなイメージ
親のルート情報にchildrenオプションを追加
値に配列 その中にルート情報のオブジェクトを用意することでルートのネストができる。
名前つきコンポーネント
router-viewで表示したいコンポーネントが複数ある場合に使用する。
index.jsのルート情報にcomponentsとして値をオブジェクト
名前なしのrouter-viewタグで表示するコンポーネントはdefaultキーで
名前つきのrouter-viewタグで表示したいコンポーネントは任意の名前をキーに設定する。
router-viewタグのname属性値を設定した任意の名前にすることで対応したコンポーネントを差し込むことができる。
6/6 Vue.js
自分なりの解釈
Vue Routerを初めて触ったイメージ
webページに見立てたコンポーネントをリクエストに応じて<router-view/>の部分を差し替える。
差し替えるだけだから動作が軽く高速。
処理の流れはrouter-linkタグならto=""で指定されたViewコンポーネントがrouterフォルダのindex.jsのコードを参照して表示される。
index.jsではコンポーネントファイルの読み込みやpathやname、componentを記述する。ここに記載したpathをrouter-linkタグのto=""で記述することで指定したコンポーネントを表示させる。
この際にpathを間違えたりimportでのファイルパスを少しでも間違えると表示されないから追加したらすぐに表示されるか確認した方が混乱せずにすみそう。
metodでもthis.$router.push('path')とすることでViewコンポーネントの差し替えができる。
また、this.$router.push({name: name, params:{ })とすることでコンポーネントの差し替えにパラメーターを持たせることもできる。
・表示したいコンポーネントの準備とexportで外部に出す
・index.jsでコンポーネントのimport、ptah name componentや必要に応じてpropsの情報を記述
・pathやnameの情報を使ってrouter-linkタグやmethodを使用してrouter-viewに表示されるコンポーネントを差し替える。
とりあえずこんなイメージで解釈しました。
もっと触って誤った理解があれば正してより理解を深められるように明日からも頑張る。
6/4 Vue.js
自分なりの解釈
vue-cliを使用したマルチページモード
流れとしては
エントリーポイントをページ毎に作成する
vue.config.jsファイルに追記
pages: {
index: {
entry: 'src/index/main.js',
template: 'public/index.html',
filename: 'index.html',
title: 'Index Page',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
entryでエントリーポイントとなるファイルのパスを指定
templateでHTMLファイルのパスを指定
filenameでbuildした際のファイル名を設定
titleでページタブのタイトルを設定
chunks いまいち理解できず・・・
html-webpack-pluginとpreload-webpack-pluginをインストールする。
一通り実践してみましたがページが表示されるまでの処理の流れがいまいち理解できず。
一番最初に表示されるページはどうやって決まっているのか・・・
少しいじりましたが変わることなく同じページが最初に表示されました。
これ以上この部分で悩んでも時間が勿体無いと思うので次に進みつつ知識の点と点が繋がって理解できる時がくるように学習を続けます。
6/3 Vue.js
自分なりの解釈
Vue-cli
npm run serverでサーバーを立ち上げようとするとエラーが発生
Component name "Index" should always be multi-word
との記載あり。
コンポーネントの名前は二語以上繋げて命名するべきと書いてあるっぽい
ESLintでの設定でエラーを吐いているようなので
.eslintrc.jsファイルに
rules: {
'vue/multi-word-component-names': 'off',
}
と追記してあげることで解決できました。
SFCイメージ
一つのファイルに一つのコンポーネントを作成。
ファイルやフォルダは自由に作成できるのでコンポーネントをきれいに管理しやすい。
作成したコンポーネントはexportを使用して外部に渡る状態にする。
取り込みたいファイルでimportで読み込みたいファイルを指定する事でコンポーネントの情報が渡る。
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の関数の処理を追いかけるのが難しいと感じる。
もっと触れて素早く理解できるように学習を進める。
6/1 Vue.js
自分なりの解釈
コンポーネントフォームでのやり取り v-model使用
ゴールはコンポーネントで作成したフォームの入力値を親側で受け取ること。
そのために、コンポーネントのテンプレートの中で入力値を監視するためにv-modelでcomutedの処理と紐付けてセッターとゲッターを作成。
セッターで子側のdataに入力を格納しつつthis.$emit('任意のイベント名', value)とすることで親側に入力値を返すイベントを作成。
親側で@任意のイベント名=親側のdata = $eventとすることで親側のdataに入力値を格納して使用できるようになる。
任意のイベント名をinputとすると親側はv-model=親側のdataとすれば再現できる。
これはv-modelでの処理がv-bind:valueと@inputをまとめてディレクティブだから結果的に子側で設定した@inputが実行されるからだと推測。
スロット
コンポーネントで設定できる差し込み口
コンポーネント内のslotタグにname属性をつけると差し込み口に名前をつけることができる。
差し込む際にはv-slot:nameの属性値とすることで指定した場所に挿入することができる。
スコープ付きスロット
差し込むための子側のdataや関数を親側から手に取るための仕組み。
コンポーネントのテンプレート内でv-bindを使用してdataや関数を紐づけておく。
例)
<slot :item="member" name="main">xxx</slot>
これは子側のdataであるmemberを:itemで紐づけている。
親側はv-slot:name(default)="parent"とすることでparentの中のitemの中にmemberが入る。
使用する時は{{ parent.item }}とすると子側のdataであるmemberの値を表示することができるようになる。
5/31 Vue.js
自分なりの解釈
v-onとv-bindを使用したフォームのコンポーネント
親から子へはprops 子から親へはthis.$emit('任意のイベント名', 値)
子側(コンポーネント側)で入力値を親側に返すための処理が必要。
this.$emit('任意のイベント名', 返す値)をメソッドやタグ内で設定することで値を返す親側で使用できるイベントを設定できる。
フォームをコンポーネントで作成した場合、親側で受け取る入力値を子側に渡して子側から親側に返すような双方向でデータのやり取りが必要。
仮想DOMのコンポーネントタグの属性に@任意のイベント名とすることで子側で処理した値が親側に返ってくる。
親側返ってきた値を$eventで受け取りつつdataの値に格納することで入力値の入ったdataが使用できるようになる。
入力値の入ったdataをv-bindで子側のpropsに渡す。
渡された入力値をtemplate内で:value=とすることでvalueに入力値が反映される。
処理を追いかけるのが難しい。もっと触れて理解を深める必要がある。
コンポーネントでv-for
v-forで使用するのは親側のdata
展開した中身を使用するのは子側
親側から子側に展開後のデータを渡す必要がある。
そのために使用するのがpropsでタイプ型などを設定しておける。
v-forで展開後の中身が文字列、数値、真偽値、配列、オブジェクトなどあらかじめprops内のtype :で定義しておく。
propsで設定したキーの名前でコンポーネントのtemplate内のタグで使用する
例) <component-a v-for="member in members"
item:"member">…
子側 props:{ item:{ type:Object}}
template:`<div> {{ item.name }}</div>`
親側で展開されたmemberを:itemに渡す
子側のpropsでのitemにmemberが格納されてtemplate内でitem.nameとすることで親側dataのmember.nameを表示することができる。
