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で次への関数を定期的に実行すると自動で画像が切り替わる