Edited at

脱jQueryしてみて、憧れのVue.jsでLPコーディングしたとき必要だった知識たち

こんちは、森高千里の「17才」を聴きながらサーモン春巻き食べてます。

Perfumeがカバーしたら素敵になると思ってます。

先日、


LPを禁jQueryで、ピュアJsでコーディングしてみました。

(ちなみに私はjQuerもLoveです。)

トキメキ不足だったのでとても楽しかったです!皆さん試したいのではないでしょか!

その時のTips私的メモです。

欲しい情報が、公式やいろんなブログに散らばってたので改良してまとめました。

(ps.世間を知るたび無力な自分の記事投稿って怖いですよね)


ひとまずVue.jsのハローワールドを初体験しました。


vue.html


<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
//el:にはVue.jsであれこれしたい部分のIDを
new Vue({
el: '#app',
data: {
message: '憧れのVue,js なんかオシャレ'
}
})
</script>


これでHTMLの{{ message }}にjs側のmessageのテキストが表示されました!


お次は、クリック検知。死ぬほど使うonclickです。


click.js

$("#target").on("click",function(){

$(this).text("へロー");
});

jQuery だとこうですよね。


click.html

<div id="app">

<button v-on:click="changeBg">背景変更</button>
</div>

<script>
// v-on:click="ここ" で関数名を登録するようです。
// methods:内に内容を記述

new Vue({
el: '#app',
data: {
message: 'ハロー Vue.js!'
},
methods: {
changeBg: function () {
document.body.style.backgroundColor = 'red';
}
}
})
</script>


el: '#app'の中に入ってなきゃダメみたいです。

v-on:click="ここ" で関数名を登録するようです。

methods:の中にどんどん関数を登録してくわけですね! おっけー!


toggleClassの検知 これがきっと味噌や!

onclickしたらtoggleClassをvue.jsでやります!!


click.js

$("#target").on("click",function(){

$(".target").toggleClass("active");
});

jQuery だとこうですよね。

sample:vue.html

<div id="app">
<p class="target" v-bind:class='{active:isActive}'>表示されるエリア</p>
<button v-on:click='isActive=!isActive'>クラスtoggleボタン</button>
</div>

<style>
.target{
transition:3s all;
opacity:0;
}
.active{
opacity:1.0;
}
</style>

<script>
data: {
message: '憧れのVue,js なんかオシャレ',
isActive: false,
}
</script>


簡単なので落ち着いて解説読んでください

v-on:click='isActive=!isActive'の指定で、

クリックするたびに

isActiveがtrueかfalseに切り替わり(toggle)

.activeがついたり消えたりする仕組みです!

vueの方はisActive: false,のフラグを書いてあげるだけです


スクロールイベント,リサイズイベントの検知 これもめっちゃ使いますよね!


click.js


// スクロール
$(window).on("scroll",function() {
console.log($(this).scrollTop());
});

// リサイズ
var w = 0;
$(window).on('load resize',function(){
w = $(window).width();
if(w < 768){
// スマホごにょごにょ
}
});


jQuery だとこうですよね。

そして肝心のvueバージョン!

これはもうシンプルに、これでいいのかな。。


vue.html


<div id="app">
<p style="height:4000px;"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
//el:にはVue.jsであれこれしたい部分のIDを
new Vue({
el: '#app',
data: {
scrollY: 0,
windowWidth: 0,
loadWidth:0,
},
//mounted DOMにアクセスできるようになった状況
mounted: function(){
window.addEventListener('scroll', this.handleScroll);
window.addEventListener('resize', this.handleResize);
window.addEventListener('load', this.handleLoadSize);
},
methods: {
handleResize: function(){
this.windowWidth = window.innerWidth;
console.log(this.windowWidth);
},
handleScroll: function() {
this.scrollY = window.scrollY;
console.log(this.scrollY);
},
handleLoadSize: function(){
this.loadWidth = window.innerWidth;
console.log(this.loadWidth);
}
}
})
</script>


感想は、超絶楽しかったけど、なんかもう途中で何やってんだ間でてきて、普通のシンプルなLPはjQueryとCSSで綺麗に書いて作ればいいと思いました。笑

使い方が甘いのかな!

毎回データ取ってきて値が変わったりするインタラクティブなやつは向いてるんだなと思いましたが、どうなんでしょかね。フレームワークだしな、、。泣

あんまフレームワークやらんから、、泣

しかし記事にしてアウトプットすると整理されて理解が深まります。

以上、ご静聴有難うごいました。

お前こっちのが楽だぞとか、ここ違うぞとかあれば教えてください。

(プラグインとか調べて、使いこなせばもっと楽なんだろなとこっそり気づいてます笑)

最後になりましたが、僕はjQuery好きです。