why

前回は vuetify でのルートの App.vue を見た

kei-s-lifehack.hatenablog.com

App では template の中に v-app, v-app-var, があり、v-main で HelloWorld コンポーネントを呼び出していた。

なので HelloWorld コンポーネントを見てみる

template

全体構造

template に囲われて

v-row に囲われて全体が作られている。

その下に v-col が連続で並んでいる

これの col の引数が幅になっていて、12 が最大。

なので 6 の幅で並べると

f:id:kei_s_lifehack:20210710202814p:plain

こうやって2個並ぶ

しかし、6/12 と 6/12 なので三つ並べると

f:id:kei_s_lifehack:20210710205312p:plain

こうやって、3つ目が下に行ってしまう。

v-img でロゴを入れる

f:id:kei_s_lifehack:20210710175139p:plain

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        />
      </v-col>
      <v-col class="mb-4">
        <h1 class="display-2 font-weight-bold mb-3">
          Welcome to Vuetify
        </h1>
      </v-col>

template の中で v-container でグリッドレイアウトを作成している

その中で v-row で全てを囲う。

そこに v-col でロゴをまず置く

その下に v-col で h1 で説明文を書いている

data にべた書きしている whatsNext のテキストを展開する

      <v-col
        class="mb-5"
        cols="12"
      >
        <h2 class="headline font-weight-bold mb-3">
          What's next?
        </h2>

        <v-row justify="center">
          <a
            v-for="(next, i) in whatsNext"
            :key="i"
            :href="next.href"
            class="subheading mx-3"
            target="_blank"
          >
            {{ next.text }}
          </a>
        </v-row>
      </v-col>

次の What's Next? の項目では、同じように cols=12 にすることによって

f:id:kei_s_lifehack:20210710214754p:plain

縦並べにすることができている

中身を見てみると、v-col を幅 12/12 でまず h2 で紹介文を出した後に

v-row で縦の範囲を決めて中身を中央揃えに

a 要素で whatsNext 配列の中身を v-for で出力している。

f:id:kei_s_lifehack:20210711004216p:plain

これはデフォルトで横並びになるから？横に並んでいく。

同じように、links や ecosystems も展開されている。

whatsNext のテキストのデータの場所

vue では template の html の後に js が書かれる。css はそのさらに下。

今回の whatsNext の部分では

data の部分にベタ書きで json 相当のものを書いている。

長くなるので whatsNext の部分だけ貼ると

<script>
  export default {
    name: 'HelloWorld',

    data: () => ({
      whatsNext: [
        {
          text: 'Explore components',
          href: 'https://vuetifyjs.com/components/api-explorer',
        },
        {
          text: 'Select a layout',
          href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
        },
        {
          text: 'Frequently Asked Questions',
          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
        },
      ],
.................
    }),
  }
</script>