KYO

Vue.jsで、スライドメニューを作る

2018年8月17日 Vue.js , ,

最近Vue.jsを勉強し始めました。

対してjQueryも使いこなせないんですが、Vue.jsってjQueryより使いやすいんじゃね?と思ってしまうほどにハマってしまいました。

というわけで、Vue.jsでサイドメニューを表示させます。

 

jQueryみたいにクリックした時に、この要素にクラスを付与するみたいなロジックを書かずとも動作してしまうのが良いですね

Vue.jsでサイドメニューを作る

とりあえず作ったのはこんな感じです

デモページ

早速HTMLを書いていきます。HTMLファイルにjsを書いていきます。

 

Vue.jsを使うのに特別な操作は必要なく、<script src=”https://cdn.jsdelivr.net/npm/vue”></script>という感じで読み込めます。

今回のターゲットは<div id=”navmenu”>ですのでel:’#navmenu’,という感じで指定します。
jQueryで言えば$(‘#navmenu’)という感じでしょうか、ここをelで指定します。

ボタンにはクリックイベントを付与しています。関数を実行させることもできますし、その場で簡単なロジックを書くこともできます。

<button v-on:click=”on = !on” v-if=”!on”>メニューを表示</button>
<button v-on:click=”fire” v-if=”on”>メニューを閉じる</button>

v-on:clickと書いていますが、他にもアクションはたくさんあるようです
参考:イベントハンドリング

v-ifは条件付きレンダリングと呼ばれていて、真の時に表示されます。
なのでonの時と!onの時で表示するボタンを切り替えています。

v-elseなんてのも使えるようです
参考:条件付きレンダリング

ここまでくるとどういうタイミングでメニューを表示するのか?まで完成できました。

トランジションを使う

これだけでは面白くないのでアニメーション効果をつけます。

transitionというコンポーネントを使うことで、v-ifにトランジション効果をつけることができます。

そのためメニュー部分は<transition name=”show”>というブロックで囲っています。

 

実はこれだけでいいのです。あとはcssを書くだけでアニメーションは動作します。
というのも、トランジションクラスが自動的に付与されるので、その名前に従ってcssを書いていけばいいだけ!

 

今回はtransitionにshowという名前をつけました。
するとcssもshow-という名前がつけられます。

指定がないと、v-という名前になります。

この辺のアニメーションの状態に関しては
Vue.js でたのしいトランジション 通常編
を見ると詳しくわかります。

 

今回の例では
メニューを開く時にクラス名はこんな感じになる。

<div class=”sidemenu show-enter-active show-enter-to”><ul><li><a href=”#”>Home</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Team</a></li> <li><a href=”#”>Work</a></li> <li><a href=”#”>Contact</a></li></ul></div>

逆にメニューを閉じる時はこんな感じ

<div class=”sidemenu show-leave-active show-leave-to”><ul><li><a href=”#”>Home</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Team</a></li> <li><a href=”#”>Work</a></li> <li><a href=”#”>Contact</a></li></ul></div>

ちなみにこれらは、勝手に付与されて勝手に消えていきます。
最終的には

<div class=”sidemenu”><ul><li><a href=”#”>Home</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Team</a></li> <li><a href=”#”>Work</a></li> <li><a href=”#”>Contact</a></li></ul></div>

こんな感じになります。

 

表示される時にまず、show-enterクラスが付与されて、すぐに消えます。
この時にopacityを0にしておけば、あとは.5sかけて変化していきますということですな

 

例えばこんな風にすると

右端から飛び出してくるスライドメニューが簡単に作れますな


関連記事

Vue.jsでコンポーネントの基礎を整理します

2018年9月2日

Vue.jsを勉強していますが、ちょっとコンポーネントの部分で躓いたので、整理もかねてメモを残します。今回はコンポーネントを定義して、そっから定義元であるメソッドを呼び出すという処理を行います。引数の受け渡しも同時に整理していきます   まずはこんなjsを用意しました。 const app = new Vue({ el:'#sa...

vue-cliで作る時にjQueryを導入するまでとビルド後にエラーが起きた時

2018年9月7日

vue-cliというすごいものがあると知ったんですが、npmとかいまいちよくわかっていませんでしたので、遠ざかっていました。しかし、Laravelとの連携を考える時に必要な知識になってくるのではないかと思い簡単に入門してみたのでそのまとめです。 プロジェクトを作成する mkdir vuecli cd vuecli npm install ...