Vue.jsでクラスをバインディングする - JavaScriptのチュートリアル

このレッスンでは Vue.jsを使って ウィンドウのスクロールに応じて 要素のクラスを バインディングしてみたいと思います。 今データバインディングは クリックしたとき、 この要素ですね。 h3要素がここにあるんですけれども、 このデータバインディングを行っています。 クリックしたときということで このロゴの部分なんですが、 v-on ディレクティブで click のイベントを handleClick という メソッドとバインディングしてあって それが methods の中に定められています。 handleClick は window の 垂直スクロールの値を scrollY に設定すると。 そうするとこの scrollY の値が変わるので 変わった scrollY が ここに設定されると いうことになるわけですね。 今の動きを確認しておきましょう。 ウィンドウをスクロールすると ここに初期値が0に なっていますけれども、 この「Fixed Nav」をクリックすると 今のスクロールの値ですね。 もっと大きくスクロールしてみましょうか。 そうするともっと大きい値に、ということで クリックしたときに データがバインディングされて ここに表示されると いうことになっていますけれども スクロールしたときに、 どんどんこの値が 変わるようにしたいということです。 ではスクロールしたときに この処理を行いたいので、 まずは v-on ディレクティブ、 この設定は取ってしまいます。 そしてここは 変えなくても大丈夫なんですが、 Click ではないので Scroll に名前を一応変えておきましょう。 スクロールしたときに行いたいことです。 これはどのように設定するか、 いくつかやり方があるんですが、 一番シンプルなのは JavaScript標準の EventListenerの形で設定することです。 その時Vueのインスタンスの準備が整って このDOMと やり取りができるようになった状態、 それを捉えるメソッドがありまして ここに加えましょう。 mounted と マウントができたらということなんですね。 そして data とか el とか methods、これプロパティなんですけれども この mounted というのは メソッド、関数の形で定めます。 ですから () ですね。…