Composition APIを使って開発をするとき、はじめの一度だけ実行したい処理の記述方法をまとめていきます。 マウント直後に実行する ライフサイクルフック マウント直後に実行する はじめの一度だけ実行したい場合、DOMが作成されマウントされた直後に、処理…

Vue 3 でComposition API が追加され、ロジック毎にまとめて記述できるようになりました。 そんな Composition API の基本的な使い方をまとめていきます。 HTML は <template>タグ内に記述 変数や関数を使う HTML は <template>タグ内に記述 まずは、HTMLの記述ですが、これはVue</template></template>…

Vue はバージョン３がリリースされていますが、Vue 2 もまだまだ使われているようです。 Vue CLI でプロジェクト作成時も、Vue のバージョンを２にするか３にするか、問われます。 Vue のバージョン３でどんな機能が追加されたのでしょうか。 バージョン３で…

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には、ボタン…

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

Vue CLI Vue CLI で Vue を始める Vue CLI インストール Vue CLI でプロジェクト作成 Vue CLI Vue には、CLIツールが提供されており、それが Vue CLI です。 Vue CLI を使うことで、CLI で Vue プロジェクトの作成等の操作が可能です。 プロジェクト作成時に…

Vue.js Vue.jsの特徴 テンプレート構文 リアクティブシステム Vue.js Vue.jsはシングルページアプリケーションを構築できるWebフレームワークです。 Vue.jsはオープンソースなフレームワークで、コミュニティ主体で開発が進められています。 Vue.jsを実行す…

シングルページアプリケーション (SPA) とは シングルページアプリケーション (SPA) とは シングルページアプリケーション (Single Page Application, SPA) とは、単一のページで動作するWebアプリケーションのアーキテクチャです。 単一のページで動作する…