Vue-Js

【Vue】v-forにはkey属性が必須の理由とバグが起きる例

v-forディレクティブにはkey属性が必須 v-forディレクティブを使う場合、v-bindディレクティブへ一意（ユニーク）のkey属性を設定すること必須である。 key属性がない場合はどう言ったバグが起こるのか簡単に説明する。 ...

【Vue】computedとmethodsの違いについて

computedがmethodsとは異なる点 computedがmethodsとは異なる点は、computedの方は依存関係に基づいてキャッシュされるという性質を持っているということ。 ...

VueやNuxtの開発でcommitする前にESLintでチェックするやり方

Gitでコミットする際にESLintを走らせて、エラーの場合はコミットさせないようにする。手順手順的には以下のよう。コミットされる前の操作である「pre-commit」をhuskyで制御する。 lint-stagedでGitのステージングエリアにあるファイルを対象にESLintのコマンドを実行する。 Gitコミット時に、ESLintでチェックしてエラーが出ればコミットされない。必要なモジュール必要なnpmモジュールをインストールする。 ...

Vue.jsのリアクティブシステムとは

VueのリアクティブシステムとはJavaScriptオブジェクトとの状態を監視し変更されたら検知するシステム。 Vueのコンポーネント内で状態を保持している値が変更された場合、リアルタイムでHTML側へその変更が検知されHTMLが更新される。 ...

Nuxt.js（SSRモード）をDocker Composeでdeployする

Nuxtプロジェクト（SSRモード）をDocker Composeを使って起動させる方法を説明する。今回は、Nuxtプロジェクト直下にDockerfileとdocker-compose.ymlを置く。 ...

【Vue】YouTube Data APIで検索結果一覧表示しpageTokenでページ送りする

YouTubeで検索ワードの結果を取得して、Vue.jsで自分のサイトに表示させる方法を説明する。今回は、**「猫　集会」**というキーワード行う。 ...

【Vue】初心者向け基本機能まとめ①

Vue.jsの基本機能をまとめて説明。 dataオプション dataオプションは、その名の通りデータを扱うオプション。定義したデータは、テンプレート側（HTML）でマスタッシュ構文で展開することができる。 ...

【Vue】コンポーネントのグローバル登録とローカル登録

Vue.jsでコンポーネントを定義する際に、グローバル登録とローカル登録の２パターンある。それぞれ説明する。グローバル登録グローバル登録するには、「Vue.componet」を使う。 ...