イイダリョウのブログ。【Vue.js】Vuetifyにヘッダー、フッターを配置(v-app-bar、v-footer)2019-09-04【Vue.js】Vuetifyにヘッダー、フッターを配置(v-app-bar、v-footer)JSVue.jsの続きです。前回はボタンを配置してみました。今回はヘッダー、フッターを配置してみます。v-app-barとv-footerを使います。クモのようにコツコツと前回のおさらいボタンを3つ配置した。v-containerという入れ子構造。v-layoutとその中のv-flexがグリッド設定設定で、画面サイズによってカラム数が変わる。クモのようにコツコツとヘッダーの配置(v-app-bar)ヘッダーを配置した。CodePen.ヘッダーのボタンを押すとフワンとアニメーションするのが気持ちいい。</div>v-app-barをv-contentの上に入れる。公式サイトでは外側をdivで囲っており、これがないとヘッダーの高さが固定されなかった。</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」などの数字にしている。Vuetify.jstemplateタグはページ読み込み時ではなくスクリプト実行時に表示される雛形となるタグ。Qiitaそもそもスロットって何?スロットとは、子コンポーネントの描画内容を親コンポーネントが決める機能です。フッターの配置(v-footer)次にフッターを配置。CodePen.フッターにコピーライト表記を追加。</div>今度はv-footerをv-contentの下に配置する。</v-footer>.flex-grow-1で成り行き設定(右寄せに)マスタッシュタグの中でDate()で年を取得こちらはシンプル。したJSを書きたいときにマスタッシュタグで囲うとscriptタグより少ない技術で済む。最後にVuetifyはCSSを書かずにJSもシンプルなまま、HTMLだけでどんどん画面が作れちゃう。デザインがマテリアルデザインで良いのであればかなり時短になると思う。タグや属性がだいたいv-hogeなのも識別がしやすくていい!次回は、ほかのパーツなども配置してみたく思います。08:16Tweet関連記事2019-09-11【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置(v-...Vue.jsの続きです。前回はVuetifyのヘッダー、フッターを配置し...2019-08-29【Vue.js】Vuetifyでボタンを並べてみる(v-app、v-content、v-contai...Vue.jsの続きです。前回はVuetifyを事始めました。今回はもう少...2019-08-25【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めたVue.jsの続きでず。前回まではコンポーネントについて触れまし...2019-08-22【Vue.js】コンポーネントにpropsオプションで値を渡すVue.jsシリーズの続きです。前回はコンポーネントにカウンター...2019-08-17【Vue.js】コンポーネントにカウンターを仕込む(※dataオプションを無名関数に!)Vue.jsシリーズ続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。