Vue.jsに取り組む方は基本的にJavaScript関係の知識をある程度有している事が前提の所があり、簡易的な実装については体系的に解説している記事が少ない印象でしたので私なりの作り方を載せていこうと思います。

読者の想定

• Vue.jsに取り組んでみようと思っている方
• 触り始めて間もない方
• 大枠を捉えたい方

前提

• Vueのプロジェクトを作成している or CDNを読み込んでいる
• Vue v2系を利用している

今回は、最終的にcodepenにて完成系を載せたいのでCDNの方をメインとした書き方になります。
考え方は、Vue CLIでも変わらないので参考になるかと思います。

ボタンの見た目を作る

ここは普通のHTMLとCSSになりますので、サクッと作ってしまいましょう。

<div id="app">
  <button class="menu-btn">
     <span class="menu-btn__line _top"></span>
     <span class="menu-btn__line _bottom"></span>
  </button>
</div>

.menu-btn {
  display:block;
  width:80px;
  height:80px;
  box-shadow:0px 0px 20px rgba(0,0,0,.15);
  border:none;
  background-color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  cursor:pointer;
  
  &__line {
    display:block;
    width:80%;
    height:1px;
    background-color:#333;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    &._top {
      top:32px;
    }
    &._bottom {
      top:48px;
    }
  }
}

こんな感じの見た目になったと思います。


ボタンのスタイルは特に指定はないので、好きにカスタマイズしてみてください。

Vueの設定

もしもまだCDNを読み込んでいない方は、こちらを読み込んであげてください。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

HTMLファイル内に下記を追加してください。

new Vue({
  el: '#app',
  data() {
    return {


    }
  }
})

HTML(body内)の全体像

<div id="app">
  <button class="menu-btn">
     <span class="menu-btn__line _top"></span>
     <span class="menu-btn__line _bottom"></span>
  </button>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {


    }
  }
})
</script>

以降、長くなってしまうので変更追加する部分のみピックアップしていきます。

HTML追加

HTMLタグ内に動的なクラスの付け替えをする記述を足していきます。

<div id="app">
  <button class="menu-btn" @click='btnAction'>
     <span class="menu-btn__line _top" :class='{ is_open : action }'></span>
     <span class="menu-btn__line _bottom" :class='{ is_open : action }'></span>
  </button>
</div>

いくつか略称を使っています。

@click　= v-on:click
:class = v-bind:class

このように記述することもできます。

スクリプト追加

new Vue({
  el: '#app',
  data() {
    return {
      action : false,
    }
  },
  methods: {
    btnAction() {
      this.action = !this.action
    }
  }
})

追加したのは下記になります。

    return {
      action : false,
    }

初期状態はクラスが付いていない状態にしたいので、falseにしておきます。

  methods: {
    btnAction() {
      this.action = !this.action
    }
  }

methods内にクリックした際の挙動を定義しています。
this.action = !this.action　この部分のイメージとしては、jQueryのtoggleをイメージするとわかりやすいと思います。
クリックしたらdata内にあるactionがfalse ↔︎ trueになる感じです。

CSSの調節

念の為、CSSの全体像を記述します。

.menu-btn {
  display:block;
  width:80px;
  height:80px;
  box-shadow:0px 0px 20px rgba(0,0,0,.15);
  border:none;
  background-color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  cursor:pointer;
  
  &__line {
    display:block;
    width:80%;
    height:1px;
    background-color:#333;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    &._top {
      top:32px;
        &.is_open {
          top:40px;
           transform:translateX(-50%) rotate(40deg);
        }
    }
    &._bottom {
      top:48px;
        &.is_open {
          top:40px;
          transform:translateX(-50%) rotate(-40deg);
        }
    }
  }
}}
}

これでボタンをクリックするとよく見るハンバーガーメニューの挙動になっているかと思います！

完成系

codepenで作成したものを最後に載せておきます。