Vuetifyのお勉強-p--q

Vueの学習

VeutifyはVueのコンポーネントライブラリなので、Vuetifyを理解するにはまずVueから理解しないといけません。

はじめに — Vue.js

API — Vue.js

スタイルガイド — Vue.js

Vue公式サイトにある資料ですがこれを読んで理解するのは困難そうでしたので、わからないときにわからないところを読むというふうにしました。

とりあえず、はじめに — Vue.jsを読むとVueではHTMLにVueのタグや属性、変数を埋め込んでvue.jsでHTMLを完成させること、Vueの機能はコンポーネントという単位でくくり出せること、ということがわかります。

【第1回】Vue.js 入門〜Hello World編〜 – 株式会社ライトコード

ざっくり理解するにはこの解説シリーズがわかりやすかったですが中途で止まってしまっています。

コンポーネントオプション

コンポーネントについてはコンポーネントオプション - vue.jsのデータにあるdata, props, methods, computedについてとくに頭にいれておかないといけません。

propsは親コンポーネント(コンポーネントをインポートする方)から子コンポーネントに一方向に値を渡すためのプロパティです(プロパティ — Vue.js)。

【第3回】Vue.js 入門〜オプション編〜 – 株式会社ライトコード

data, methods, computedについてはこの解説がわかりやすいです。

dataはコンポーネントのプロパティでプロパティ値を変更するとHTMLが再作成されます。コンポーネントを複数回使用されるので原則的に関数で定義しないといけません(コンポーネントの基本 — Vue.js)。

methodsはコンポーネントのメソッドです。computedと違って再描画時に常に計算されます。

computed（算出プロパティ）でmethodと違って使用しているdataの値が更新されない場合はキャッシュが使用されます(算出プロパティとウォッチャ — Vue.js)。

vueファイルの構造

Vue Component の仕様 · vue-loader

vueファイルの構造はこのvue-loaderの解説がわかりやすかったです。

<template>　デフォルト言語はhtml。vue ファイル内の <template> は JavaScript の render 関数にコンパイルされます(ES2015 · vue-loader)。

<script>　デフォルト言語はJavaScrpt。コンポーネントオプションを定義してexportします。

<style>　デフォルト言語はcss。scoped か moduleを使ってスタイルをコンポーネントに限定させることができます(スコープ付き CSS · vue-loader)。

テンプレート構文

vueで使うhtmlの構文についてはテンプレート構文 — Vue.jsに解説があります。

値のないプロパティはtrueを意味します(真偽値の受け渡し)。

v-bind: に対して : 、 v-on: に対して @ 、 v-slot: に対して#、を使うディレクティブの短縮記法があります(ディレクティブの短縮記法 )。

VeurtifyのUIコンポーネントを使いこなすには名前付きスロットの理解が必要ですが、実際に使ってみないとなかなか理解が難しいです。

UIコンポーネントの例を動かしながら学習することにします。

Vue.jsのslotの機能を初心者にわかるように解説してみた | フューチャー技術ブログ

とりあえずこれを読むとだいたいわかります。

Vuetifyの学習資料

クイックスタート — Vuetify.js

Vuetifyの公式サイトですが、初心者向けガイドはまだ未完成になっています。

とりあえずまずはVuetifyのレイアウトの概念を頭に入れます。

breakpoint

Breakpoints — Vuetify.js

表示を切り替える画面サイズの範囲が既定値xs, sm, md, lg, xlとして定義され、これをbreakpointと言います。

display属性

CSS Display helpers — Vuetify.js

display属性は.d-{breakpoint}-{value}という形式で表現しますが、xsの場合は{breakpoint}は省略されます。

breakpointは{breakpoint}で指定したものより大きなものすべてにも適用されます。

例えば.d-{value} は.d-xs-{value}を意味し、xsは一番小さなbreakpointなのでこの{value}はすべてのbreakpointに適用されることになります。

{value}としては次の9つものが使えます。

    none
    inline
    inline-block
    block
    table
    table-cell
    table-row
    flex
    inline-flex

例えばmdのみで表示したい場合は.d-none .d-md-flex .d-lg-noneのように組み合わす必要があります。

hidden属性

hidden属性の場合はonlyが使え、例えばhidden-sm-onlyの場合はmdでのみ非表示になります。

hidden-sm-and-downの場合はmdとそれ以下のbreakpointで非表示になり、逆にhidden-sm-and-upの場合はmdとそれ以上のbreakpointで非表示になります。

`paddingとmargin`

CSS Spacing helpers — Vuetify.js

paddingとmarginはこの解説にあるような形式で指定されます。

paddingはp、marginはmで表現し、例えばpa-4は全方向に16px paddingすることを意味します。

VuetifyのUIコンポーネントのAPI

API explorer — Vuetify.js

ここから各UIコンポーネントの props、slots、events、functionsが確認できます。

propsではUIコンポーネントの設定のため、slotsではUIコンポーネント内に要素を挿入するため、eventsはUIコンポーネント内のイベントを受け取るため、functionsはUIコンポーネントを変化させるため、に使います。

【vue.js】 Vuetifyで簡単ページネーション(Paginations) | アールエフェクト

eventsの使い方はこの例がわかりやすかったです。

Vuetifyのお勉強