今回はmountedの使い方について、解説をします。
まず、mountedがどのタイミングかというと、DOMが読み込まれた直後のタイミングを意味します。
明確な、ライフサイクルダイアグラムが知りたい方はドキュメントにライフサイクルの説明がありますのでそちらを参考にしてみてください。
https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム
mountedが見込まれるタイミングはある程度わかったと思うので、使い方について説明をしていきます。
vue mountedの使い方について
スクロールされるたびにスクロールの位置を取得や要素の高さを取得するといった簡単なコードを例に解説をしていきます。
結論、下記の記述でOKです。
mounted() {
// イベントが発火するたびに
window.addEventListener("イベント名", 関数名)
// DOMが呼び込まれたときに一回だけ
this.関数名()
},記述の順番としては、mountedのあとにmethodsの記述をするのが一般的だと思います、
逆にしても動かなくはないと思いますがあまりおすすめはしません。
全体のコード
<template lang="pug">
div.scroll
Header
.scroll-position スクロール位置の取得 : {{ scrollY }}
.section(ref="section1")
p section1の高さ：{{section1}}
.section(ref="section2")
p section2の高さ：{{section2}}
</template>
<script>
export default {
data() {
return {
scrollY: 0,
section1: "",
section2: "",
}
},
mounted() {
window.addEventListener("scroll", this.getScroll)
this.getHeight()
},
methods: {
getScroll() {
this.scrollY = window.scrollY
},
getHeight() {
this.section1 = this.$refs.section1.offsetTop;
this.section2 = this.$refs.section2.offsetTop;
}
}
}
</script>
<style lang="stylus">
.scroll
.scroll-position
position fixed
width 250px
top 100px
left 0
right 0
margin auto
.section
height 100vh
</style>全体のコードはこれだけです。
html（pug）の記述
<template lang="pug">
div.scroll
Header
.scroll-position スクロール位置の取得 : {{ scrollY }}
.section(ref="section1")
p section1の高さ：{{section1}}
.section(ref="section2")
p section2の高さ：{{section2}}
</template>まずはスクロール位置を取得したものを表示させるために、「scrollY」を表示させます。
これはログに出したりでも確認ができるので、表示させなくても確認することはできます。
次に、TOPから要素の高さを取得するために、section1とsection2の要素を用意します。
htmlの記述はこれだけです。
vueの記述
<script>
export default {
data() {
return {
scrollY: 0,
section1: "",
section2: "",
}
},
mounted() {
window.addEventListener("scroll", this.getScroll)
this.getHeight()
},
methods: {
getScroll() {
this.scrollY = window.scrollY
},
getHeight() {
this.section1 = this.$refs.section1.offsetTop;
this.section2 = this.$refs.section2.offsetTop;
}
}
}
</script>まずはデータの定義をします。
今回、用意するデータは3つ
- スクロール位置を格納するためのデータ
- sectionの要素の高さを格納するデータ 2つ
methods
【スクロール位置の取得】
getScroll() {
this.scrollY = window.scrollY
},スクロール位置の取得に関しては、「window.scrollY」だけで取得できます。
【要素の高さの取得】
getHeight() {
this.section1 = this.$refs.section1.offsetTop;
this.section2 = this.$refs.section2.offsetTop;
}要素の高さは、要素に対して「offsetTop」で取得することができます。
vue mounted
mounted() {
window.addEventListener("scroll", this.getScroll)
this.getHeight()
},関数を作っただけでは、実行されないので関数が呼出されるように呼び出してあげましょう。
window.addEventListener("scroll", this.getScroll)スクロールするたびにスクロール位置の取得を行うといった記述になります。
this.getHeight()DOMが読み込まれたときに1回だけ呼出されます。
まとめ
- mountedが読みこまれるタイミングは、DOMが読みこれたとき
- mountedの記述は、イベント名と関数名でイベンが発火するタイミングで呼出す
- 読み込まれたタイミングだけ呼出す
上記のことに気をつければ、問題ないかと思います。
おすすめの参考書
CodeCamp（コードキャンプ）
プロダクトをプロのエンジニアと一緒に作ることが出来つつ、 時間や場所は自由に選べる為、費用を抑えながら、 意欲を保ちプログラミング習得が可能となっております。
学べる言語
- HTML/CSS
- JavaScript
- PHP
- MySQL
- Rudy
- JAVA
- Andoroid
- Swift
※プランによって学べる学習言語が異なります。
- 初めてプログラミングに挑戦される方
- 自由な時間/場所で学習をしたい方
- 修了後も就職/転職やキャリアについての相談がしたい方
コメント