Vueと共通

【Nuxt.js】Nuxt文法編:mounted

前置き

ライフサイクルフックの1つmounted()
似ていると言われるcreated()
参考にしてみてください🍎🙋‍♀️

公式:
https://jp.vuejs.org/v2/api/#mounted
https://jp.vuejs.org/v2/guide/instance.html#インスタンスライフサイクルフック


mounted()とは

クラウアント側で呼ばれるもの。
なのでサーバーサイドレンダリング(SSR)でも
使えますがサーバーでは動きません。
シングルページアプリケーション(SPA)では
特に問題なく使えます🌟

⬇️参考サイト
Vue.js サーバサイドレンダリングガイド
SPA、SSR、プリレンダリングの違いをまとめてみた
Vueライフサイクルフック
Nuxt.jsのライフサイクルを知っておく
Vue.js と Nuxt.js のライフサイクル早引きメモ

呼び出しタイミングはインスタンス作成後、
マウンティング後(DOMが作られた後)
なのでDOM操作が可能です🌟
createdの違いはここです。

$elプロパティ、getElementByIdなどが
問題なく使えます。
もちろんthisコンテキストも使えます。

簡単な使い方

APIで使用

DOM操作は色をつけているだけなので
cssでも良いのですが
API通信とDOM操作の両方をする時は
mounted()が適切、
ということが分かれば良いかと思います。


API以外でも

スクロールイベントなんかにも使えます💖🙌
スクロールしたら下からほわっと出てくる
アニメーションをつけてみます🎈🧸

<nuxt />部分にだけ実装したいので
layouts/default.vuemounted()を記載✍️

解説

スクロールイベントが始まったら
0.4秒に1回checkScroll()を実行します。
ビューポイント(表示領域)の高さに
7を掛けてから9で割った数を
actionHightとします。

liなどにjs-scrollクラスを付与しているので
そのクラスがついたtopの位置から境界ボックスを作り、
それがactionHightより小さければ
そこに新たなクラスjs-scroll-activeを付与します。

iPhone8の場合
表示領域は375×667
高さは667なので 667*7/9 = 518.7777777777778
それよりもjs-scrollクラスが付与されている
要素のサイズが小さくなった時に
アニメーションをつけて表示させます✨👀

これをjs-scrollクラスが最大になる
…js-scrollクラスの付与した
1番下の要素が表示されるまで繰り返します。

コード

予めY軸をさげておいて
js-scroll-activeが付与されたら
Y軸を本来の位置に引きあげます。


まとめ

どうしてもDOM操作が必要な場合はmounted()
不要な場合はcreated()で使い分けるのが良いですね🍒😀

-Vueと共通
-,

© 2020 aLiz Nuxt