Vue.js
Vue.js v2の基本操作まとめ
Vue.jsの基本操作についてまとめました。 Vue.jsの基本操作まとめ v-on v-onは@で省略可能です。 See the Pen v-on:click by Sosak (@Sosak2021) on Code…
CATEGORY
Vue.js
Vue.jsに関する基礎、実装例、トラブル解決の記事をまとめています。
95ARTICLES
Vue.js
Vue.jsのtransitionでJavaScriptフックを使ってより複雑なアニメーションを適用する
Vue.jsのtransitionでJavaScriptフックを使ってより複雑なアニメーションを適用する方法を紹介します。
Vue.js
Firebase+Vue.js(Vue2 Options API)でログイン/サインアップフォームを作成する
Firebase+Vue.js(Vue2 Options API)でログイン/サインアップフォーム作成する方法です。 ログインとサインアップ（アカウントの新規作成）の機能があり、ログインやサインアップに失敗するとエラーメッセージが表示されます。
Vue.js
Vue.jsでJSON Serverを使う
Vue.jsでJSON Serverを使う方法をまとめました。 JSON ServerはAPIモックサーバーです。 ローカル環境からAPIが使えない場合などに使います。
Vue.js
【Vue】動的にコンポーネントを切り替えたい場合(is属性)
Vue.jsでコンポーネントをv-forでループさせたい場合のやり方を紹介します。 下の例では、tailwindcssでSVGアイコンを使った場合のアイコンコンポーネントをループしてそれぞれ適用させます。
Vue.js
Vue 3でtailwindcssを使う方法
Vue 3でtailwindcssを使う方法です。 Vue 3でtailwindcssを使う方法 vueプロジェクトの作成 vue create プロジェクト名 まずはvueプロジェクトを作成します。 tailwindc…
Vue.js
【Vue3+tailwindcss】垂直スクロールで水平アニメーション
Vue v3とtailwindcssを使って、垂直スクロールで画像が水平に動くアニメーションを作る方法を紹介します。 tailwindcssの導入 tailwindcssの導入方法は、Vue 3でtailwindcssを…
Vue.js
Nuxt.jsで.envファイルを使う方法
Nuxt.jsで.envファイルを使う方法です。 Nuxt.jsで.envファイルを使う方法 dotenvをインストール まずはdotenvをインストールします。 npm install @nuxtjs/dotenv .…
Vue.js
Nuxt.jsでmoment.jsを使う方法
Nuxt.jsでmoment.jsを使う方法を紹介します。 Nuxt.jsでmoment.jsを使う方法 moment.jsをインストール npm install moment Vue.filter()を使用してカスタマ…
Vue.js
Nuxt.jsとfirebase(ログイン/ログアウト機能)
Nuxt.jsとfirebase(ログイン/ログアウト機能)を実装する方法です。 Nuxt.jsとfirebase(ログイン機能) Nuxt.jsでfirebaseを使う方法はNuxt.jsでfirebaseを使う方法を…
Vue.js
Nuxt.jsでfirebaseを使う方法
Nuxt.jsをインストールからfirebaseを使えるようになるまでにすることをまとめました。 Nuxt.jsの設定 Nuxt.jsのプロジェクトの作成 npx create-nuxt-app [プロジェクト名] でN…
Vue.js
APIキーなどの漏洩を防ぐVueでの.env.localの使い方
Vueでの.env.localの使い方です。 .env.localファイルを使うことで、GitHubでソースコードをあげても、APIキーなど大切な情報の漏洩を防ぐことができます。
Vue.js
APIデータを取得してグリッド表示とリスト表示を切り替える方法(Vue.js)
Vue.js v2でaxiosを使ってAPIデータを取得してグリッド表示とリスト表示を切り替える方法を紹介します。 Vue 3でも考え方は使えます。 表示を切り替える方法 今回はボタンを押すと、グリッド表示とリスト表示を…
Vue.js
Vuex + axiosでの基本的なAPI操作方法(CRUD)追加・削除・更新・フィルター
Vuex + axiosを使って、追加・削除・更新・フィルターといった基本的なAPI操作方法(CRUD)を紹介します。
Vue.js
Vuexの基本的な使い方(Vue. js v2)
Vuexについてと、Vue.js v2におけるVuexの基本的な使い方をまとめました。 Vuexとは Vuexはライブラリ・ステイトマネジメントパターンです。 ステイトというのは状態と言われますが、ほぼデータのことと最初…
Vue.js
Vue.js v2の$emitとイベント修飾子 | 子から親への値の受け渡し方法
Vue.jsの$emitを使って子コンポーネントから親コンポーネントへの値の受け渡し方法をまとめました。 $emitとイベント修飾子の使い方例1 Todoアプリで子のclickイベントを親に渡したいとします。 子コンポー…
Vue.js
Vue.js v2のprops | 親から子への値の受け渡し方法
Vue.jsのpropsの使い方です。 簡単な例から見てみましょう。 props todoアプリの場合をみてみます。 App.vueとTask.vue、TaskItem.vueという2つのコンポーネントがあるとします。 …
Vue.js
【Vue.js】v-forで選択されたアイテムを取得して表示する方法
v-forで選択されたアイテムを取得して表示する方法です。 Vue2のコード例ですが、考え方はVue 3でも同じです。
Vue.js
OpenWeatherMap APIで天気情報を取得する(Vue.js)
OpenWeatherMapのapiで過去、現在、未来予測の天気の情報を取得することができます。 無料から使い始めることができる点でも使いやすいです。 Vue.jsでOpenWeatherMapで天気情報を取得する方法を紹介します。
Vue.js
QuasarのIcon Genie CLIのインストール方法とよく使うオプションについて
QuasarのIcon Genie CLIを使うとアイコン（ファビコン）をデスクトップ、macandroid、iphone用に一括して作成することができます。Icon Genieのインストール方法、アイコン(ファビコン)作成時によく使うオプション、package.jsonの設定方法などを説明しています。
Vue.js
Firebase+Vue.js(Vue3 Composition API)でログイン/サインアップフォームを作成する
Firebase+Vue.js(Vue3 Composition API)でログイン/サインアップフォーム作成する方法です。 JavaScriptでパスワードベースのアカウントを使用してFirebase認証を行う場合のF…
Vue.js
Vue 3 Composition APIでasync-awaitを使う方法
Vue 3から導入されたComposition APIでasync-awaitを使う方法をまとめました。 async-await自体の使い方は、こちらの記事を参考にしてみてください。 JavaScriptのasync/a…
Vue.js
Vue 3 Composition APIの基本的な使い方
Vue 3から新しく導入されたComposition APIの基本的な使い方をまとめました。 Vue 3 Composition APIの基本的な使い方 Options APIとComposition APIの違い 基本…