Vue Router Vue Router Vueでは、シングルページアプリケーション (SPA) をつくることができます。 SPAでは、ページは1枚だけです。 しかし、URLをもとに複数の画面を表示したいときもあります。 そんなときに、Vue Router を使ってルーティングを行います。…

Vuetifyで提供されているクラス スペーシング カラー その他 Vuetifyで提供されているクラス Vuetifyでは、スタイリングのためのクラスもいくつか用意されています。 詳しくは、ドキュメントに書いてあります。 (Styles and animations) vuetifyjs.com スペ…

ドキュメントに詳しく書いてある 試してみる ボタン (Button) カード (Card) 前回、Vuetifyをインストールしたので、今回はコンポーネントをいくつか使ってみたいと思います。 utouto97.hatenablog.com ドキュメントに詳しく書いてある Vuetifyには、ボタン…

Vuetifyを使ってみる 環境はVue 2 Vuetifyをインストールして使ってみる Vuetifyを使ってみる 環境はVue 2 今回は、Vuetifyを導入していきます。 VuetifyはVueで使えるマテリアルデザインフレームワーク (UIフレームワーク) です。 github.com 公式のドキュ…

Vueでスタイルを設定 Vueで使えるUIフレームワーク Vueでスタイルを設定 Vueでスタイルを設定するには、<style></style>を追加してその中に書いていくことができます。 また、テンプレート内のタグにクラスやIDを設定して、クラスやIDに対するスタイリングを<style></style>に書くこともで…

Dockerとdocker-composeでVueプロジェクトを作成 Dockerfile docker-compose.yml Dockerイメージをビルド Vue CLIを使ってプロジェクト作成 コンテナを起動 Dockerとdocker-composeでVueプロジェクトを作成 Dockerとdocker-composeを使って、Vueプロジェクト…

v-forを使ってみる v-forを使ってみる v-forを使って、リストを表示してみます。 まずはリストを準備します。 data() { return { items: [ { id: 1, name: "apple" }, { id: 2, name: "orange" }, { id: 3, name: "peach" }, { id: 4, name: "grape" }, { id…

v-for v-forをオブジェクトに使う v-for Vueでは、v-forを使うことで、配列の要素を一つずつ処理することができます。 例えば、v-forを使うことで、配列の要素をリスト表示するための<li>タグを繰り返し生成することができます。 v-forでは、value in list のよ</li>…

v-if v-ifを使ってみる v-if v-ifで条件を指定することで、その条件がTrueの場合のみ、その要素が描画されます。 つまり、v-ifを使うことで、表示する要素を切り替えることができます。 v-ifは、v-elseやv-else-ifと組み合わせて使うことができます。 条件を…

Vue でカウンタコンポーネントを作る コンポーネントで使うデータを宣言 コンポーネントで使うメソッドを宣言 カウンタ完成 Vue でカウンタコンポーネントを作る カウンタコンポーネントを作成していきます。 ファイルは、src/components/Counter.vueとしま…

Vue CLI で作ったプロジェクトのファイルを見てみよう カスタマイズしてみる Vue CLI で作ったプロジェクトのファイルを見てみよう まずは、main.jsを見てみましょう。 import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('…