問題

6
Vue

UIライブラリを導入してみよう!

Vueの問題に挑戦しよう!

問題

UIライブラリを導入してみよう!

今度はVue.jsのUIコンポーネントライブラリを使ってみよう!
VueにはいろいろなUIライブラリがあるから、少し紹介する。

・vue-material
googleのマテリアルデザインに準拠したUIが簡単に作ることができる
・bootstrap-vue
bootstrapというワードは聞いたことあるかもしれないが、bootstrapというUIライブラリのvue版だと思って欲しい。
・Vuetify
これもマテリアルデザインにそったライブラリになる。Vue.js用UIライブラリで一番使われている定番中の定番。

今回はこの中から`Vuetify`を使って以下のようなダイアログを作ってみて欲しい。 HTMLファイルにVueとVuetifyのCDNを読み込んで作ってみよう。

あらかじめエディタに書くコード

                    <div id="app">
      <v-app>
        <v-main>
          <v-container>
            <template>
              <v-row justify="center">
                <v-btn color="green lighten-2" dark="" @click.stop="dialog = true">
                  Click Here!!
                </v-btn>
                <v-dialog v-model="dialog" max-width="400">
                  <v-card>
                    <v-card-title class="headline">忍者CODE</v-card-title>
                    <v-card-text>
                      <h3 style="margin: 10px 0;">自分なりの理論を組み立てろ!!</h3>
                      <p>■  HTML&CSS/</p>
                      <p>■  Javascript</p>
                      <p>■  jQuery</p>
                      <p>■  模写コーディング</p>
                      <p>■  sass</p>
                      <p>■  PHP</p>
                      <p>■  Git</p>
                      <p>■  Vue</p>
                    </v-card-text>
                    <v-card-actions>
                      <v-spacer></v-spacer>
                      <v-btn color="green darken-1" text="" @click="dialog = false">
                        戻る
                      </v-btn>
                      <v-btn color="green darken-1" text="" @click="dialog = false">
                        OK
                      </v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>
              </v-row>
            </template>
          </v-container>
        </v-main>
      </v-app>
    </div>
¥Vue¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

必要なCDNを読み込んだら、あとはVuetify側が用意してくれているタグを使うだけだ。
Vuutifyのタグは基本的に`v-xxxx`のようにvで始まる。
vuetifyのコンポーネントの中には普通のhtmlタグも追加できるし、cssも追加できるから 必要な部分はvuetifyでつくり、それ以外の細かい箇所は自分でcssを書いていくといい。

さらにスキルアップしたい方は公式LINEから「Vue」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET