yuheijotaki.com

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その4

5 Vue.js の高度な機能

5.1 トランジションアニメーション

5.1.1 transition ラッパーコンポーネント

transition コンポーネントは、自身が囲んでいるコンポーネントあるいは要素が出入り（enter/leave）する際にトランジションを追加します。出入りは、以下の場合に起きます。

  • v-if の条件が変わった時
  • v-show の条件が変わった時
  • 動的コンポーネント（componentコンポーネント）の is 属性値が変わった時

5.1.2 トランジションクラス

<transition name="fade"> と指定すれば、v-enterではなく、fade-enterというプレフィクスが付与される。

トランジションクラスの一覧

v-enter

要素が挿入される前に付与され、アニメーション開始時に削除されるクラスです。挿入のアニメーションの初期スタイルを適用するために使用します。

v-enter-to

挿入のアニメーションの開始時に付与され、アニメーション終了後に削除されるクラスです。挿入のアニメーションの終了時のスタイルを適用するために使用します。

v-enter-active

要素の挿入前からアニメーション終了まで付与されるクラスです。トランジションの設定を書くために使用します。

v-leave

削除のアニメーションの開始前に付与され、アニメーション開始時に削除されるクラスです。削除時のアニメーションの初期スタイルを適用するために使用します。

v-leave-to

削除のアニメーションの開始前に付与され、アニメーション終了時に削除されるクラスです。削除時のアニメーションの終了時のスタイルをあてるために使用します。

v-leave-active

削除のアニメーションの開始前から終了後まで付与されるクラスです。トランジションの設定を書くために使用します。

5.1.3 fade トランジションの実装

<div id="app">
  <button v-on:click="isShown = !isShown">表示の切り替え</button>
  <transition> <p v-show="isShown">Hello, world!</p> </transition>
</div>

.v-enter-active,
.v-leave-active {
  transition: opacity 500ms ease-out;
}

.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}

.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}

// Vue のマウント
var app = new Vue({
  el: "#app",
  data: function() {
    return {
      isShown: false
    };
  }
});

5.2 スロット

5.2.1 単一スロット

<my-button> 内にコンテンツがない場合は、<slot> 内の OK が表示される。

<div id="app">
  <!-- コンテンツありでコンポーネントを設置する -->
  <my-button>送信する</my-button>
  <!-- コンテンツ無しでコンポーネントを設置する -->
  <my-button></my-button>
</div>

var MyButton = {
  template: `
    <button>
      <!-- 親コンポーネントで渡されたコンテンツに差し替えられる -->
      <slot>OK</slot>
    </button>
  `
};

// Vue のマウント
var app = new Vue({
  el: "#app",
  components: {
    MyButton: MyButton
  }
});

5.2.2 名前付きスロット

スロットには slot 要素の name属性で名前を指定できます。これによって名前で指定した特定の箇所にスロットを挿入することが可能です。

<div id="app">
  <my-page>
    <!-- name 属性値が header の <slot> と置き換わるコンテンツ -->
    <h1 slot="header">This is my page</h1>
    <!-- 単一スロットと置き換わるコンテンツ -->
    <p>ここにテキストが入ります。</p>
    <!-- name 属性値が footer の <slot> と置き換わるコンテンツ -->
    <p slot="footer">This is footer</p>
  </my-page>
</div>

var MyPage = {
  template: `
    <div>
      <header>
        <!-- ヘッダーのスロット（名前付きスロット） -->
        <slot name="header"></slot>
      </header>
      <main>
        <!-- ボディのスロット（単一スロット） -->
        <slot></slot>
      </main>
      <footer>
        <!-- フッターのスロット（名前付きスロット） -->
        <slot name="footer"></slot>
      </footer>
    </div>
  `
};

// Vue のマウント
var app = new Vue({
  el: "#app",
  components: {
    MyPage: MyPage
  }
});