【Nuxt.js】Nuxt文法編：mounted

前置き

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

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

【Nuxt.js】Nuxt文法編：created

mounted()とは

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

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

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

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

簡単な使い方

<template>
  <div class="page">
    <p id="text">Hello Nuxt.js!</p>
  </div>
</template>

<script>
export default {
  mounted () {
    document.getElementById("text").style.color = "orange"
  },
}
</script>

<p id="text">Hello Nuxt.js!</p>

</div>

</template>

export default {

mounted () {

document.getElementById("text").style.color = "orange"

}

</script>

APIで使用

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

<template>
 <div class="page">
    <ul id="lists">
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
 </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      posts: [],
    }
  },
  mounted () {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then ((res) => {
        this.posts = res.data
      })
    document.getElementById("lists").style.color = "orange"
  }
}
</script>

<style lang="scss" scoped>
</style>

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

data () {

return {

posts: [],

}

mounted () {

axios.get('https://jsonplaceholder.typicode.com/posts')

.then ((res) => {

this.posts = res.data

})

document.getElementById("lists").style.color = "orange"

}

</script>

</style>

API以外でも

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

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

解説

スクロールイベントが始まったら
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番下の要素が表示されるまで繰り返します。

コード

<template>
  <div class="layout layout-default">
    <main class="content">
      <nuxt />
    </main>
    <FooterDefault />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'LayoutDefault',
  components: {
    FooterDefault: () => import('@/components/templates/footers/FooterDefault.vue'),
  },
  data () {
    return {
    }
  },
  mounted (): void {
    window.addEventListener('scroll', this.checkScroll)
    this.checkScroll()

    setTimeout(() => {
      this.checkScroll()
    }, 400)
  },
  methods: {
    checkScroll () {
      const actionHight = window.innerHeight * 7 / 9

      for (let i = 0; i < document.getElementsByClassName('js-scroll').length; i++) {
        if (document.getElementsByClassName('js-scroll')[i].getBoundingClientRect().top < actionHight) {
          document.getElementsByClassName('js-scroll')[i].classList.add('js-scroll-active')
        }
      }
    },
  },
})
</script>

<style lang="scss" scoped>
  .layout-default {
  }
</style>

</main>

</div>

</template>

import Vue from 'vue'

export default Vue.extend({

name: 'LayoutDefault',

components: {

FooterDefault: () => import('@/components/templates/footers/FooterDefault.vue'),

data () {

return {

}

mounted (): void {

window.addEventListener('scroll', this.checkScroll)

this.checkScroll()

setTimeout(() => {

this.checkScroll()

}, 400)

methods: {

checkScroll () {

const actionHight = window.innerHeight * 7 / 9

for (let i = 0; i < document.getElementsByClassName('js-scroll').length; i++) {

if (document.getElementsByClassName('js-scroll')[i].getBoundingClientRect().top < actionHight) {

document.getElementsByClassName('js-scroll')[i].classList.add('js-scroll-active')

}

})

</script>

.layout-default {

}

</style>

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

.js-scroll {
  transform: translateY(16px);
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1s, filter 0.48s, transform 0.24s 0.08s;

  &.js-scroll-active {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

.js-scroll {

transform: translateY(16px);

opacity: 0;

filter: blur(8px);

transition: opacity 1s, filter 0.48s, transform 0.24s 0.08s;

&.js-scroll-active {

transform: translateY(0);

filter: blur(0);

opacity: 1;

}

まとめ

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