Vue– category –

Vue3では、<script setup>タグを使用して、コンポーネントのセットアップコードを定義します。このタグは、通常のJavaScriptコードを書くことができますが、Vueのコンポーネントオプションも使用することができます。つまり、Vue2のOptions APIの代...

Vue 3は、2020年にリリースされたVue.jsの最新バージョンです。Vue.jsは、JavaScriptのフレームワークの1つであり、UIの構築に特化したものです。Vue 3は、Vue.jsの前バージョンであるVue 2と比較して、パフォーマンスの向上、TypeScriptのサポート、Compo...

Vue 3の状態管理ライブラリーであるPiniaについて、使用方法を解説します。 【Piniaとは】 Piniaは、Vue 3向けの状態管理ライブラリーで、Vuexのような機能を提供します。Vue 3で新しく追加されたComposition APIを使用することで、より直感的で柔軟な状態...

Vue Routerは、Vue.jsアプリケーションでページ間の遷移を管理するためのオフィシャルなルーティングライブラリです。Vue.js 3では、Vue Routerのバージョン4が利用可能です。ここでは、Vue Routerの使い方について詳しく説明します。 【インストール】 Vu...

Vue 3のComposition APIは、従来のオプションベースのAPIに代わるもので、より直感的かつ再利用性が高いコードを書くことができます。Composition APIには、複数の関数に分割してコンポーネントのロジックを定義するためのHooksがあります。以下でいくつか...

Vue 3 では Composition API が導入され、より直感的かつ柔軟なコードを書くことができます。この API には、Vue 2 にあったオプション API の代替として使用することができるいくつかの関数が含まれています。その中には、ref と toRefs も含まれています...

本記事ではVue 3のonMountedフックについて説明します。 【onMounted とは？】 onMountedは、Vue 3のComposition APIで提供されるライフサイクルフックの1つであり、コンポーネントがマウントされた後に実行される関数を定義するために使用されます。この...

Vue3では、従来のオプションAPIに加えて、Composition APIが導入されました。Composition APIでは、Vue2のcomputedプロパティに相当する機能を、computed関数として提供しています。computed関数は、状態の変化に応じて再評価されるリアクティブな値を作成...

Vue 3のComposition APIでは、watch関数を使用してデータ変更を監視できます。 【1. 簡単なデータの監視】 import { reactive, watch } from 'vue' const state = reactive({ count: 0 }) watch(() => state.count, (newValue, oldValue) =>...