【Vue.js】Vuetifyにヘッダー、フッターを配置（v-app-bar、v-footer）

Vue.jsの続きです。前回はボタンを配置してみました。今回はヘッダー、フッターを配置してみます。v-app-barとv-footerを使います。それではいきましょう！

【目次】

前回のおさらい
ヘッダーの配置（v-app-bar）
フッターの配置（v-footer）
最後に

前回の記事はこちら

※参考：【Vue.js】Vuetifyでボタンを並べてみる（v-app、v-content、v-container、v-layout、v-flex、v-btn） - クモのようにコツコツと

前回のおさらい

ボタンを3つ配置した。

See the Pen Vuetify 02 by イイダリョウ (@i_ryo) on CodePen.

JSは超シンプル！

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })

メインはHTMLコード

<div id="app">
    <v-app>
      <v-content>
        <v-container>
         <v-layout wrap>
          <v-flex xs12 sm6 md4 text-center my-5><v-btn>押して</v-btn></v-flex>
          <v-flex xs12 sm6 md4 text-center my-5><v-btn >押して</v-btn></v-flex>
          <v-flex xs12 sm6 md4 text-center my-5><v-btn>押して</v-btn></v-flex>
        </v-layout>
        </v-container>
      </v-content>
    </v-app>
  </div>

v-app ＞ v-content ＞ v-containerという入れ子構造。
v-layoutとその中のv-flexがグリッド設定設定で、画面サイズによってカラム数が変わる。
v-btnがボタン

そして、CSSコードはなんとゼロ！

詳細は前回記事を参照

※参考：【Vue.js】Vuetifyでボタンを並べてみる（v-app、v-content、v-container、v-layout、v-flex、v-btn） - クモのようにコツコツと

ヘッダーの配置（v-app-bar）

ヘッダーを配置した。

See the Pen Vuetify 03 by イイダリョウ (@i_ryo) on CodePen.

ヘッダーのボタンを押すとフワンとアニメーションするのが気持ちいい。

HTMLコード

<div id="app">
    <v-app>
    <div>
      <v-app-bar>
        <!--ヘッダー内容-->
      </v-app-bar>
  </div>
  <v-content>
        <v-container>
         <!--本文内容-->
        </v-container>
      </v-content>
    </v-app>
  </div>

v-app-barをv-contentの上に入れる。

公式サイトでは外側をdivで囲っており、これがないとヘッダーの高さが固定されなかった。

ヘッダー部分の詳細

    <div>
      <v-app-bar
        color="gray accent-4"
        dark
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
  
        <v-toolbar-title>びゅうてぃふぁい</v-toolbar-title>
  
        <div class="flex-grow-1"></div>
  
        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>
  
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
  
        <v-menu
          left
          bottom
        >
          <template v-slot:activator="{ on }">
            <v-btn icon v-on="on">
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </template>
  
          <v-list>
            <v-list-item
              v-for="n in 5"
              :key="n"
              @click="() => {}"
            >
              <v-list-item-title>りんく {{ n }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-app-bar>
  </div>

v-app-bar全体をdivタグで囲む
v-app-bar-nav-iconにナビアイコンが表示される
v-toolbar-titleにタイトル文字を入れる
.flex-grow-1はflexboxによる成り行き設定
v-btnの中にv-icon。中の文字を認識してアイコンを表示している
v-menuの中にtemplateで開閉ボタン、v-listでリストメニュー
templateのv-slot:activator属性でonの設定をし、v-onと紐付けている
v-listの中のv-list-itemで変数nをv-forでループして’v-list-item-title`のマスタッシュタグで「りんく1」などの数字にしている。

※参考：https://vuetifyjs.com/en/components/app-bars

templateタグはページ読み込み時ではなくスクリプト実行時に表示される雛形となるタグ。

※参考：templateタグの意味と使い方 | HTML | できるネット

v-slot:activatorって初遭遇

特定の条件時(クリック時・ホバー時のみなど）のみポップアップする場合のトリガー用のスロット

※参考：Vuetifyのv-slot:activatorの使い方 - Qiita

そもそもスロットって何？

スロットとは、子コンポーネントの描画内容を親コンポーネントが決める機能です。

※参考：Vue.js中級編！？「スコープ付きスロット」を理解しよう | Hypertext Candy

なるほど。

次にフッターを配置。

See the Pen Vuetify 04 by イイダリョウ (@i_ryo) on CodePen.

フッターにコピーライト表記を追加。

HTMLコード

<div id="app">
    <v-app>
    <div>
      <v-app-bar>
        <!--ヘッダー内容-->
      </v-app-bar>
  </div>
  <v-content>
        <v-container>
         <!--本文内容-->
        </v-container>
      </v-content>
  <v-footer>
         <!--フッター内容-->
  </v-footer>
    </v-app>
  </div>

今度はv-footerをv-contentの下に配置する。

フッター部分の詳細

  <v-footer>
    <div class="flex-grow-1"></div>
    <div>&copy; 2019 - {{ new Date().getFullYear() }} クモのようにコツコツと</div>
  </v-footer>

.flex-grow-1で成り行き設定（右寄せに）
マスタッシュタグの中でDate()で年を取得

こちらはシンプル。ちょっとしたJSを書きたいときにマスタッシュタグで囲うとscriptタグより少ない技術で済む。

※参考：https://vuetifyjs.com/en/components/footer

※参考：HTMLの特殊文字一覧：文字コードの変換表と書き方の説明 - ウェブランサー

最後に

f:id:idr_zz:20190904082012p:plain

VuetifyはCSSを書かずにJSもシンプルなまま、HTMLだけでどんどん画面が作れちゃう。デザインがマテリアルデザインで良いのであればかなり時短になると思う。

タグや属性がだいたいv-hogeなのも識別がしやすくていい！

次回は、ほかのパーツなども配置してみたく思います。それではまた！

※続き書きました！

https://www.i-ryo.com/entry/2019/09/11/071054

www.i-ryo.com

※参考：Vue.jsの習得のためにやったことまとめ
qiita.com

前回のおさらい

ヘッダーの配置（v-app-bar）

フッターの配置（v-footer）

最後に