5/28 Vue.js
自分なりの解釈
非同期通信
最近はasync関数とawaitを使うようになっているらしい。
async関数を使用すると返り値がPromiseという処理の完了を判別できる型になる。
awaitを使用すると処理が完了してから次の処理を実行するタイマーのような役割と関数び本来の返り値を返すという役割がある。
この本来の返り値を返すという処理がないとasync関数の返り値が全てPromise型になってしまう。
これらを使用しないと非同期通信の場合、処理が終了していないのに次の処理が実行されてしまい結果的に正しい返り値を待たずに処理が完了してしまい意図したがデータを取得できないことになる。
今日学習した処理の流れ
画面表示時に非同期通信したい場合はcretedかmountedに
イベントで非同期通信したい場合はmethodsに
リアルタイムで非同期通信したい場合はwatchに記述する。
関数で定数responseにレスポンスの内容をjson形式で入れたい
そのために関数をasync関数として
await ftech(url, option) ftechの引数にアクセス先とアクセスメソッドなどのoptionを渡す
.then( response => response.json() )とすることでftech完了後にresponseをjson形式に変換する。
レスポンスから使用したいデータ取り出してdataに入れる。
以後、仮想DOM内でdataとして使用できるようになる。
5/27 Vue.js
自分なりの解釈
computed dataの値を監視して変化があった場合に処理を実行してリターンで返す
todoリストの処理の流れ
入力欄の値をnewItemとしてv-modelで取得
ボタンクリックで発火 addItem関数処理へ
addItem関数でnewItemを配列に追加 newItemを初期化
配列をv-forで表示
削除ボタンクリックで発火 deleteItem関数にインデックスを引数に渡して処理へ
インデックス番号をもとに配列のデータをspliceで削除
検索欄の入力情報をv-modelで取得
computedで入力情報を監視
配列から入力情報を含むデータだけをfilterとindexOfを使用してリターンする
リターンしたデータをv-forで表示するとリアルタイムで更新される
バリデーショ
エラー用配列をdataに準備しておく
formタグに@submitでvalidateイベント発火
validataイベントでエラー用配列を初期化
if文で弾く場合はエラー用配列にメッセージ追加
エラー用配列の要素数が1以上なら表示するよう設定
エラー用配列をv-forを使用して表示する
5/26 Vue.js
自分なりの解釈
v-showとv-ifは同じ挙動をするが内部の処理が異なる。
v-showは表示の準備がされているものの表示と非表示を要素にdisplay:noneを付与したり取り消して表現している。初期値が非表示の状態でも描写のコストが掛かっている。
v-ifは表示する要素を削除、追加を行っている。初期値が非表示の場合は描写コストはかからないが切替のたびに削除するので切替コストが高くなる。
使い分けのイメージは頻繁に切り替える場合はv-showを切替頻度が少ない場合はv-ifを使用する。
transitionタグは滑らかな動きを表現したりするのに便利なタグ
単一要素に使用する。
複数の要素に使用したい場合はtransition-groupタグを使用する。
spliceメソッド 配列に対して追加や削除を行えるメソッド
array.splice(a,b,c)
a 操作するインデックス番号
b 削除する要素数
c 追加する要素
HTMLタグの属性にdataを使用したい場合はv-bindを使用する。
省略形は属性の頭に:をつけて記述する。
:をつけないとただの文字列として認識されるため意図した挙動にならない。
フォームで使用するVue.js
双方向データバインディング
v-onとv-bindを使用する場合とv-model を使用する方法がある。
v-modelの方がシンプルに記述できる。
またv-modelには修飾子がある。
.lazy イベント発火のタイミングが入力のリアルタイムからフォーカスが外れたときに切り替わる。@inputから@changeに変更するイメージ
.number 入力値を文字列から数値に変換
.trim 空白をカット
今日作成したカルーセルスライドショーの処理の流れ
dataでactiveを設定
画像のパスとインデックス番号に連動するidを配列内のオブジェクトに準備
次へボタンが押されたらactiveが1増加する関数を定義
前へボタンが押されたらactiveが1減少する関数を定義
activeの値を選択された画像のidと等しくする
メインで表示される画像はimgタグのsrcを配列名[active].imgとすることで画像のパスを呼び出す
setIntervalで次への関数を定期的に実行すると自動で画像が切り替わる
5/25 Vue.js
自分なりの解釈
v-onの修飾子preventは本来の挙動を防ぐために使用する。
例えば、aタグをクリックした際にページ上部に遷移してしまう挙動を@click.preventとすると改善できる。
Vueインスタンスのdataに記述したものは記述した時点ゲッターとセッターが定義される。
オブジェクトのdataを追加する際にobj.nema='tarou'とすると追加できているがゲッターとセッターは設定されない。
オブジェクトに追加したい時はVue.set(vm.obj, key, value)とする必要がある。
methodsはキャッシュされない。都度実行される。
computedとwatchはキャッシュされる。変更があった場合に処理される。
アロー関数を使用するときにthisを使用すると記述する箇所によってはvueインスタンスを示すものではなくなってしまい意図しない挙動になってしまうことがあるため、インスタンス名を記述する必要がある。
:class="{active: active === item.id}"このような書き方をするとactiveとitem.idが等しいときのみactiveというclassが付与される。
transitionタグを使用すると6つのクラスが付与される。
name-enter フェードインの始点
name-enter-to フェードインの終点
name-enter-active フェードイン全体への効果
name-leave フェードアウトの始点
name-leave-to フェードアウトの終点
name-leave-active フェードアウト全体への効果
今日使用した@clickでの処理の流れ
クリックされたらidを渡して関数が動く
関数ではdataに記述されたactiveの値を渡されたidの値にする
divタグにv-showでactiveの値とidが等しいか確認
結果クリックされたidをもつdivタグのみ表示される
5/24 Vue.js
自分なりの解釈
仮想DOMを使用
どのHTMLタグにJavaScriptの処理が付与されているか判別しやすい
idやclassを使用して要素を取り込む必要がないので変更が容易
v-bindで複数の属性を付与したい場合は、dataで属性名をキーに持つオブジェクトを作成してv-bind="オブジェクト名"でkeyの属性とvalueの属性値を設定できる。
v-show=falseの場合にdisplay:noneを付与することで非表示にできる。
判定式が必要ない場合はv-ifよりv-showの方が良い？
v-for="item in items" itemsは配列またはオブジェクト名
itemsの中身がitemに一つずつ展開されて繰り返し処理の中で使用できる。
v-for="(value, key, index) in items"とするとキーとインデックス番号も使用できる。
配列やオブジェクトを変更する可能性がある場合はvue側でデータの追跡ができるように:keyで一意の値を渡す必要がある。
v-text=textContainer 渡したdataをテキストとして挿入
v-html=innerHTML HTMLのタグをタグとして処理してくれる。
v-cloak cssで[v-cloak]{}を設定することでVueの読み込み中の処理を記述できる。
[v-cloak]{display: none}とすることで読み込みが終わるまでは非表示となる。
これを使用することで読み込み前に一瞬マスタッシュ構文が表示されるのを防ぐことができる。
5/23 vue.js
自分なりの解釈
・WEBページに動きを加えるライブラリ
・el:で適応範囲を設定
・data:{}でWEBページで使用する変数を定義(処理を加えることはできない)
・methods:{}で関数の定義
・computed:{}で何らかの処理を実行した変数をreturnしてあげる
・ディレクティブとはHTMLタグを操作するコマンド
v-if 表示 非表示を条件分岐
v-for 繰り返し表示 railsで使用するranderのcollectionに似ている
v-bind 属性にdataを挿入
v-on イベントの付与 引数にイベント名を渡す
v-model 双方向のバインド？インプットタグで使用すれば入力された値を取得して別のHTMLタグに利用する
