Vue関連 勉強メモ

Vue関連の勉強を進めたので忘れないようにメモメモ。 今日勉強したのはVue Router、Mixin、 Vuetify、sessionStorageなど。 フロントエンドの勉強の楽しいですね。CSSフレームワークはVuetifyが使いやすそうだなと思ってます。

Vue Router勉強メモ

・Vue Router活用して、src/router/indexにbeforeEnterとかbeforeEachとか書くことで、画面遷移前ロジックを適用できる。(ユーザーがログイン済みか判定してまだログインしてなかったらログインページに飛ばすなど)
router.vuejs.org

・scrollBehavior関数使って画面遷移後のスクロールの位置を指定できる
router.vuejs.org

・Vue Routerで指定するコンポーネントは<router-view>タグ内で表示される ・routerにchildrenを設定することで、App.vue以外のファイルにも<router-view>記述可能 router.vuejs.org

Vuetify勉強メモ

・Vue.jsのCSSフレームワーク。 ・公式ドキュメントが整っていて調べやすい印象 ・<v-icon>タグ内にiconをしてすれば一通りのアイコンが使えるっぽい。(デフォルトで有効?) materialdesignicons.com

sessionStorage勉強メモ

・ブラウザにデータを持たせることができる ・sessionStorageはタブが閉じるまでデータを保持する。(localStorageはウインドウを閉じても有効。また異なるタブでも有効) ・setItem、getItem、removeItemなどの関数でデータの取り扱いが可能