◀ 16.

【Vue.js】ヘッダー/フッターの共通コンポーネントの作り方

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

共通コンポーネントの作成

Header.vue

<template>
  <header>
    <h1>Header</h1>
  </header>
</template>

上記の様にヘッダーのような共通となりうるコンポーネントを作成する。
 

共通コンポーネントの読み込み

App.vue

<template>
  <div id="app">
    <Header/>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from './path/to/Header'

export default {
  components : {
    Header
  }
}
</script>
 

App.vueといった#appを定義している大元のファイル等の適当な箇所に読み込ませたい共通コンポーネントを指定する。

 

子ページ
子ページはありません
同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成(mac)
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. on:click クリック時のイベント処理
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法

人気ページ

最近更新/作成されたページ

最近コメントのあったページ

最近の質問

コメント一覧

    No.1 | Bekaccelf | 2023-11-17 06:03:23

    Tamoxifen led to a 32 reduction in osteoporotic fractures RR 0 <a href=https://cialiss.buzz>buy cheap generic cialis online</a> How Should Adoxa Be Taken

ログインしなければコメント投稿はできません。