Vue.jsでハンバーガーメニューを作成

jQueryからVue.jsの移行が始まっているので、勉強を兼ねてVue.jsでハンバーガーメニューを作成しました。

出来上がったコードをみると、確かにVue.jsの方が少ないコードで実装できることを実感しました。jQueryもいいけど、Vue.jsも面白い。

See the Pen Untitled by This is standard (@koutafunahashi) on CodePen.

CodePenに実装したものをアップしています。
ポイントはメニューをクリックした後、ハンバーガーメニューが閉じる事。
jQueryだとこの処理も書かなければならなかったのですが、Vue.jsは数行のコードで実装することができたのが、ちょっと驚き。

var app = new Vue({
  el: '#nav',
  data: {
    active: false
  }
});

<nav id="nav">
    <div class="hamburger" v-on:click='active=!active'>
        <span class="line line01" v-bind:class="{'v-line01':active}"></span>
        <span class="line line02" v-bind:class="{'v-line02':active}"></span>
        <span class="line line03" v-bind:class="{'v-line03':active}"></span>
    </div>
<!--/ハンバーガーボタンここまで-->
    <div class="menu" v-show="active">
        <ul>
            <li><a href="#concept" v-on:click='active=!active'>CONCEPT</a></li>
            <li><a href="#product" v-on:click='active=!active'>PRODUCT</a></li>
            <li><a href="#company" v-on:click='active=!active'>COMPANY</a></li>
            <li><a href="#news" v-on:click='active=!active'>NEWS</a></li>
        </ul>
    </div>
</nav>
<!--/メニューここまで-->

Vue.jsのコードはこのくらいです。
activeをfalseにしておくことで、HTMLのmenuブロックが表示になります。
v-showの箇所です。displayを切り替える指定になります。

v-on:click='active=!active'を記述することで、jQueryのtoggle()と同じ働きが実装できます。これが驚きでした。簡単！
これをメニューのaタグに記述することで、クリックするとメニューを非表示に実装することができます。

もっと早く勉強しておけばよかった。。。ｗ
これからもjQuery→Vue.jsを勉強していきたいと思います。