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タグのみ表示される