【Vue.js入門】Vue.jsの高度な機能

必要なのか?と思いながらも

Vue.jsの高度な機能って何?的な感じなんだけど、ここでは「トランジションアニメーション」のサンプルが紹介されている。

普通に使う機能になってきているんだよね。

でも、まぁサンプルがね・・・長い。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

webukatu.com

ファイルで作成したのだけど

jsfiddleでコードが紹介されているのだけど、ファイルに書いてみたのだ。

Edit fiddle - JSFiddle

ここでは

Anime.jsの設定してないんだよね。

どうしてるんだろう?

それでも動くのなんでだ?

ってことでファイルで展開してみた。もちろん、ちゃんと入力した。

index.html

<!DOCTYPE html>

<title>サンプル</title>
<link rel="stylesheet" href="./style.css"></link>
<!-- ↓これ必要 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script> 
<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
    <pull-down-menu></pull-down-menu>
</div>

<script src="app.js"></script>

app.js

var PullDownMenu = {
    data: function () {
      return {
        isShown: false,
        name: 'メニュー',
        items: [
          '1-1',
          '1-2',
          '1-3',
        ]
      };
    },
    template: `
      <div @mouseleave="isShown = false">
        <p @mouseover="isShown = true"><a href="#" class="menu">{{ name }}</a></p>
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @leave="leave"
          :css="false"
        >
          <ul v-if="isShown">
            <li v-for="item in items" :key="item">
              <a href="#" class="menu-item">{{ item }}</a>
            </li>
          </ul>
        </transition>
      </div>
    `,
    methods: {
      beforeEnter: function(el) {
        el.style.height = '0px';
        el.style.opacity = '0';
      },
      enter: function(el, done) {
        // 3秒かけて、透明度と高さを変更して出現させる
        anime({
          targets: el,
          opacity: 1,
          height: el.scrollHeight + 'px',
          duration: 3000,
          complete: done
        })
      },
      leave: function(el, done) {
        anime({
          targets: el,
          opacity: 0,
          height: '0px',
          duration: 300,
          complete: done
        })
      }
    }
  }
  
  new Vue({
    el: '#app',
    components: {
      PullDownMenu: PullDownMenu
    }
  })

ここで質問なのは、本では全部、セミコロン(;)がないのだ。

でも、動くんだけど。これはこれでいいのか?
ググってみた。

セミコロンやカンマの使用の是非はどちらでも良いです。

参考:スタイルガイド — Vue.js

なんだって。そうなんだ。

style.css

div, ul, li, a, p {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

div {
    width: 90px;
}

.menu {
    width: 90px;
    text-decoration: none;
    background-color: #9999ff;
    color: #000;
    border: solid 1px #6666cc;
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.menu-item {
    width: 90px;
    text-decoration: none;
    background-color: #ccccff;
    color: #000;
    border: solid 1px #6666cc;
    border-top: none;
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

入力しているだけだけど、「あぁこんな機能があるんだ」は確実に蓄積しているはずなんだけど。

webukatu.com