ページの作成

ページの作成

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

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

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

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
テンプレートを更新

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

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

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.8 | guest | 2020-09-15 20:08:28

    Appreciate this post. Will try it out. https://anunturi-parbrize.ro/luneta-volkswagen-72.html

    No.7 | guest | 2020-08-29 07:00:11

    【Vue.js】ヘッダー/フッターの共通コンポーネントの作り方 - IT技術総合Wiki | CWiki [url=http://www.g2cdcig2bk3kgzf28557p4z07x4e6719s.org/]udjkpdzvjcn[/url] djkpdzvjcn http://www.g2cdcig2bk3kgzf28557p4z07x4e6719s.org/ <a href="http://www.g2cdcig2bk3kgzf28557p4z07x4e6719s.org/">adjkpdzvjcn</a>

    No.6 | guest | 2020-03-27 14:18:28

    Inpatient Alcohol Rehab Centers Drug Rehab Near Me <a href="http://aaa-rehab.com">Alcohol Rehab Near Me</a> Drug Rehab Centers Free Rehab Near Me http://aaa-rehab.com JamesTop

    No.5 | guest | 2019-12-13 05:51:58

    Ahaa, its nice dialogue on the topic of this piece of writing here at this website https://www.reiva.us

    No.4 | guest | 2019-11-20 03:12:16

    I just wanted to give you a quick heads up! Besides that, wonderful blog! https://www.laboutiquecoupdefoudre.com

    No.3 | guest | 2019-11-12 13:43:05

    effectively monitor cheap viagra online without prescription quite solution everywhere passenger [url=http://www.vagragenericaar.org/]cheap viagra usa without prescription[/url] previously analysis much percentage http://www.vagragenericaar.org/ necessarily purple http://www.vagragenericaar.org/

    No.2 | guest | 2019-11-02 06:41:25

    Spot on with this write-up, I honestly think this website needs a great deal more attention. I'll probably be back again to see more, thanks for the advice! http://oldehickorytaproom.com/

    No.1 | guest | 2019-08-27 01:53:57

    It is the best time to make some plans for the future and it’s time to be happy. I’ve read this post and if I could I want to suggest you some interesting things or advice. Perhaps you could write next articles referring to this article. I want to read even more things about it! Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! However, how could we communicate? It’s the best time to make some plans for the future and it’s time to be happy. I have read this post and if I could I wish to suggest you few interesting things or suggestions. Perhaps you could write next articles referring to this article. I desire to read even more things about it! http://hats.com/