目次
Vue.js入門前（特徴、導入ハードル、学習コストなど）
Vue.js入門前（特徴、導入ハードル、学習コストなど）
ここでは、Vue.jsを始める前に知っておきたい情報などをまとめています。
これからVue.jsを入門しようと思っている方や、導入...
johobase.com
Vue.jsのインストール（セットアップ）
Vue.jsのインストール（ダウンロード・NPM・CDN）
Vue.js（ヴュー・ジェイエス）は、Webアプリケーション（ネットワークアプリケーション）のUI（ユーザーインターフェース）を構築...
johobase.com
Vue.js 入門
Vue インスタンスの作成とマウント [Vue.js3.X]
Vueアプリケーションでは、createApp関数で新しいVueインスタンスを作成するところから始まります。
Vueでアプリケ...
johobase.com
Vue.jsのコンポーネント指向とUIの構造化
コンポーネントシステム
Vue.jsには重要なコンセプトの1つに「コンポーネントシステム」があります。
コンポーネントには「構成...
johobase.com
Vue.jsのライフライクル [Vue v3.x]
Vue.jsを使用したアプリケーションの開発は、Vueのインスタンスを作成するところからスタートします。
作成したインスタンスにHTM...
johobase.com
Vue.jsのオプション構成（インスタンスのプロパティ）
ここでは、Vue.jsのオプション構成（インスタンスのプロパティ）について紹介します。
Vueインスタンスの作成
Vue.j...
johobase.com
Vue.jsのリアクティブシステムとデータバインディング
Vue.jsはJavaScriptのデータとHTMLテンプレートのDOM要素を結びつける「リアクティブなデータバインディング」を備えています...
johobase.com
構文
Vue.jsで文字列や数値などのデータ（値）を表示するMustashe（マスタッシュ）記法
本記事では、Vue.jsで作成するアプリケーションでデータをHTML（Webページ）に表示する際に使用するMustashe（マスタッ...
johobase.com
オプション
数値、文字列などの値やオブジェクトなどのデータを格納するdata [Vue.js]
本記事では、Vue.jsで作成するアプリケーションの状態を定義するdataプロパティオプションについて紹介します。
dataプ...
johobase.com
メソッド（アプリケーションの振る舞い）を定義するmethods [Vue.js]
本記事では、Vue.jsで作成するアプリケーションのメソッド（振る舞い）を定義するmethodsプロパティオプションについて紹介しま...
johobase.com
関数の結果を返せる算出プロパティ computed [Vue.js]
本記事では、Vue.jsで作成するアプリケーションの算出プロパティを定義するcomputedプロパティオプションについて紹介します。...
johobase.com
算出プロパティ「computed」のSetter関数 [Vue.js]
ここでは、算出プロパティ（computed）のSetter関数について紹介します。
算出プロパティcomputedのGette...
johobase.com
データやプロパティの変更を監視するウォッチャーwatch [Vue.js]
本記事では、Vue.jsで作成するアプリケーションのデータやプロパティを監視して変更を検知するwatchプロパティオプションについて...
johobase.com
カスタムオプションを定義して参照する $options [Vue.js]
Vue.jsには、データを定義するdataオプション、メソッドを定義するmethodsオプション、算出プロパティを定義するcompu...
johobase.com
ディレクティブ
Vue.jsのディレクティブ（v-xxxx）で属性やイベントなどを設定する
ここでは、Vue.jsのディレクティブについて紹介します。
ディレクティブとは
ディレクティブは「v-」で始まる「v-xxx...
johobase.com
v-modelディレクティブでフォームの入力要素と双方向データバインディング [Vue.js]
本記事では、Vue.jsのv-modelディレクティブについて紹介します。
v-modelディレクティブ
ユーザーからの入力...
johobase.com
v-onディレクティブでイベントの処理（メソッドや式）をバインドする [Vue.js]
本記事では、Vue.jsのv-onディレクティブについて紹介します。
v-onディレクティブ
ユーザーからの操作を受け付ける...
johobase.com
v-bindディレクティブでHTML要素の属性にバインドする [Vue.js]
本記事では、Vue.jsのv-bindディレクティブについて紹介します。
v-bindディレクティブ
HTMLの要素はcla...
johobase.com
v-showディレクティブでHTML要素の表示・非表示を制御する [Vue.js]
本記事では、Vue.jsのv-showディレクティブについて紹介します。
v-showディレクティブ
Webアプリケーション...
johobase.com
v-ifディレクティブでHTML要素の表示・非表示を制御する [Vue.js]
本記事では、Vue.jsのv-ifディレクティブについて紹介します。
v-ifディレクティブ
v-ifディレクティブはv-s...
johobase.com
v-ifディレクティブとv-showディレクティブの違いと使いどころ [Vue.js]
Vue.jsで要素の表示と非表示を切り替ええたい場合には、v-showディレクティブを使う方法と、v-ifディレクティブを使う方法が...
johobase.com
v-forディレクティブで配列やオブジェクトのデータを表示する [Vue.js]
本記事では、Vue.jsのv-forディレクティブについて紹介します。
v-forディレクティブ
一覧表を表示するアプリケー...
johobase.com
ディレクティブの省略記法 「v-bind: ⇒ :」「v-on: ⇒ @」[Vue.js]
Vue.jsでは、HTMLテンプレートでディレクティブを使用して、データをバインドしたりDOMを操作したりします。
デ...
johobase.com
v-bindディレクティブで複数の属性をまとめて一括指定する [Vue.js]
Vue.jsのv-bindディレクティブを使用すると、HTML要素の属性に値をバインドすることができます。
v-bin...
johobase.com
ディレクティブ（v-bind, v-on）の動的引数 [Vue.js]
Vue.jsのv-bindディレクティブを使用すると、HTML要素の属性に値をバインドすることができます。
v-bin...
johobase.com
要素のtextContentを更新するv-textディレクティブ [Vue.js]
ここでは、Vue.jsのv-textディレクティブについて紹介します。
v-textディレクティブ
Vue.jsでは、Vue...
johobase.com
文字列をHTMLとして埋め込み要素のinnerHTMLを更新するv-htmlディレクティブ [Vue.js]
ここでは、Vue.jsのv-htmlディレクティブについて紹介します。
v-htmlディレクティブ
前回の記事でv-text...
johobase.com
データを1度だけバインドするv-onceディレクティブ [Vue.js]
ここでは、Vue.jsのv-onceディレクティブについて紹介します。
v-onceディレクティブ
Vue.jsのv-onc...
johobase.com
マスタッシュ構文（{{...}}）による画面のチラツキを防止するv-cloakディレクティブ [Vue.js]
ここでは、Vue.jsのv-cloakディレクティブについて紹介します。
v-cloakディレクティブ
マスタッシュ（Mus...
johobase.com
v-onディレクティブに複数のイベントを一括指定する [Vue.js]
ここではv-onディレクティブで、複数のイベントをまとめて一括で指定する方法について紹介します。
v-onディレクティブ
V...
johobase.com
要素
複数の要素のブロックを描画する<template>（v-if, v-for） [Vue.js]
v-ifディレクティブやv-forディレクティブは、単一の要素に対して指定する必要があります。
例えば、v-ifディレクティブを使...
johobase.com
アニメーション機能を提供する<transition>要素 [Vue.js]
Vue.jsには、HTMLのテンプレート要素に対してアニメーションの効果を与える仕組みが標準で用意されています。
アニメーションの...
johobase.com
インスタンスプロパティ・メソッド
インスタンスプロパティ（$data、$props、$el、$options、$parent、$root、$slots、$refs、$attrs） [Vue.js]
ここでは、Vue.jsに用意されているインスタンスプロパティを紹介します。
インスタンスプロパティ
インスタンスプロパティと...
johobase.com
DOMが更新された後に処理を行う this.$nextTick [Vue.js]
今回は、DOMの更新が完了した後に処理を行うことができるnextTickについて紹介します。
Vue.jsのDOM更新
Vu...
johobase.com
class属性（CSSクラス）とstyle属性（CSSスタイル）のバインド
class属性（CSSクラス）を指定するv-bindディレクティブ [Vue.js]
Vue.jsのv-bindディレクティブを使うとHTML要素の属性を指定することができます。
今回は、v-bindディレクティ...
johobase.com
style属性（CSSスタイル）を指定するv-bindディレクティブ [Vue.js]
Vue.jsではHTML要素の属性を指定する際にv-bindディレクティブを使用します。
v-bindディレクティブによるバインデ...
johobase.com
v-onディレクティブの修飾子
イベントの既定の動作をキャンセルするv-onディレクティブの.prevent修飾子 [Vue.js]
JavaScriptのイベントには、ブラウザー上で発生する既定の動作が用意されています。
既定の動作とは、ブラウザーがイベントに伴...
johobase.com
イベントの伝搬をストップするv-onディレクティブの.stop修飾子 [Vue.js]
JavaScriptのイベントは、イベントが発生した要素でのみ発生するのではなく、イベントの発生元である用途の親要素や子要素でもイベ...
johobase.com
イベントを現在の要素でのみ処理するv-onディレクティブの.self修飾子 [Vue.js]
前回の記事では、.stop修飾子を使用してイベントの伝播を抑制する方法についてご紹介しました。
JavaScriptの...
johobase.com
イベントをキャプチャフェーズで処理するv-onディレクティブの.capture修飾子 [Vue.js]
前回の記事では.self修飾子を使用して、イベントが発生した要素だけでイベントが処理されるようにする方法について紹介しました。
...
johobase.com
イベントを1回のみ実行するv-onディレクティブの.once修飾子 [Vue.js]
Vue.jsではv-onディレクティブを使用することで、HTMLの要素のイベントにイベントハンドラーのメソッドをバインドして処理を行...
johobase.com
キーイベントで特定のキーが押された場合に処理を行うv-onディレクティブのキー修飾子 [Vue.js]
Vue.jsでは特定のキーが押された時にキーイベントを発生させるためのキー修飾子が用意されています。
今回は、キーイベントで特...
johobase.com
マウスイベントで特定のボタンが押された場合に処理を行うv-onディレクティブのマウス修飾子 [Vue.js]
前回の記事では、キーボードの特定のキーが押されたことを検知して、キーイベントを処理する際に使用するキー修飾子について紹介しました。
...
johobase.com
コンポーネント
コンポーネントの基本 [Vue.js]
ここでは、Vue.jsのコンポーネントについて紹介します。
コンポーネントとは
コンポーネントとはページを構成するUI部品の...
johobase.com
テンプレートをHTMLの<script>要素として表すx-template [Vue.js]
今回は、<script>要素を使用してテンプレートを記述する際に使用する「x-template」について紹介します。
...
johobase.com
コンポーネント間の通信 親から子へデータを渡すprops [Vue.js]
Vue.jsのコンポーネントは、Vueインスタンスを生成してアプリケーションを作成する場合と同様に、コンポーネント用のデータ（dat...
johobase.com
コンポーネント間の通信 子から親へイベントを通知する$emit [Vue.js]
前回の記事では子コンポーネントにはpropsを経由して、親側のアプリケーションやコンポーネント（以下親コンポーネントと記載）のデータ...
johobase.com
コンポーネントのイベントを定義するemits [Vue.js]
今回は、コンポーネントに定義できるemitsオプションについて紹介します。
emitsオプション
Vue.jsのバージョン3...
johobase.com
componentメソッドでコンポーネントを定義する [Vue.js]
ここでは、componentメソッドを使ったコンポーネントの定義について紹介します。
Vue.jsのコンポーネント
コンポー...
johobase.com
コンポーネントにpropsで定義されていない属性を渡す（指定する） [Vue.js]
コンポーネントの属性には、基本的にはpropsオプションに定義さえている属性を指定します。
しかし、コンポーネントには、props...
johobase.com
props、$emitで親子コンポーネント間でデータをやり取り（同期）する（v-bind、v-on） [Vue.js]
Vue.jsでは、propsと$emitを使用して、親コンポーネントと子コンポーネントの間でデータをやり取りします。
...
johobase.com
コンポーネントにv-modelディレクティブを実装する（props, $emit）[Vue.js]
前回は子コンポーネントに実装したpropsと$emitを利用して、親コンポーネントのデータをやり取り（同期）する方法を紹介しました。...
johobase.com
1つのコンポーネントに複数のv-modelディレクティブでのバインディングを適用する [Vue.js]
前回の記事では子コンポーネントにpropsと$emitを実装し、親コンポーネントからv-modelディレクティブを使用して双方向バイ...
johobase.com
propsや$emitを使わずに親子コンポーネント間の通信をする $parent、$refs、$root [Vue.js]
Vue.jsの親子コンポーネント間の通信は、原則としてpropsと$emitを使用します。
子コンポーネントはpropsで親コンポ...
johobase.com
コンポーネントに指定したコンテンツを外から埋め込む<slot>要素 [Vue.js]
コンポーネントを作成していると、コンポーネント側の実装時点では配置できない要素などを利用する側から差し込みたい場合があります。
...
johobase.com
名前付きスロットでコンポーネントの複数のスロットにコンテンツを埋め込む v-slot [Vue.js]
前回はコンポーネントに外部からコンテンツを埋め込むことができるスロット（slot要素）を紹介しました。
前回の記事では...
johobase.com
子コンポーネントのデータを参照するスコープ付きスロット（slot要素の属性にv-bindでバインドする） [Vue.js]
前回、前々回の記事ではVue.jsのスロットを使用して、親コンポーネントから子コンポーネントへコンテンツを埋め込めることを紹介しまし...
johobase.com
コンポーネントを動的に切り替える<component>要素 [Vue.js]
Vue.jsには、コンポーネントを制御するためのコンポーネントのメタコンポーネントの組み込みコンポーネントが用意されています。
...
johobase.com
動的コンポーネントのキャッシュを保持する<keep-alive>要素 [Vue.js]
前回の記事では、<component>要素を使用して、動的にコンポーネントを切り替える方法について紹介しました。
...
johobase.com
コンポーネントの要素をコードから生成するrenderオプション（関数） [Vue.js]
コンポーネントのHTMLテンプレートを定義する際は、templateプロパティオプションを利用するのが基本です。
const ...
johobase.com
provideとinjectを使用して離れた子孫コンポーネントにデータを渡す [Vue.js]
Vue.jsでは、通常、親コンポーネントから子コンポーネントにデータを渡す時にはpropsを使います。
HTML
<...
johobase.com
コンポーネントに定義したFunction型のpropsにメソッドを渡して処理を行う [Vue.js]
Vue.jsの親子コンポーネント間の通信は、親から子へデータを渡す時にはpropsを使用し、子から親へ通知を行う時には$emitメソ...
johobase.com
コンポーネントの再利用可能なオプションを追加するミックスイン mixin [Vue.js]
Vue.jsには、コンポーネントを拡張する仕組みとしてミックスインという機能が用意されています。
ここでは、ミックスイン（mi...
johobase.com
カスタムディレクティブ
カスタムディレクティブを定義する directive [Vue.js]
Vue.jsには、属性の形式でDOMツリー（文書ツリー）を操作する仕組みとしてディレクティブが用意されています。
ディレクティブに...
johobase.com
引数付きのカスタムディレクティブを定義する [Vue.js]
本ブログでは、以前にVue.jsのカスタムディレクティブについて紹介しました。
カスタムディレクティブを自作することで...
johobase.com
修飾子付きのカスタムディレクティブを定義する [Vue.js]
本ブログでは、以前にVue.jsのカスタムディレクティブについて紹介しました。
また、引数付きのカスタムディレクティブ...
johobase.com
Vue.js Tips
Vue.jsで定番のプログラムサンプルの「Hello world!」を作成する
Vue.jsで定番のプログラムサンプルの「Hello world!」を作成する
プログラミングの入門書やWebサイトには、初歩的なプログラムの例として「Hello world!」が使われることがとても多いです。
...
johobase.com
ツール・開発環境
Vue.js devtoolsのインストール
Vue.js devtoolsはVue.jsを利用して開発するアプリケーションのデータ（変数の値）などをリアルタイムに確認できるブラウザーの...
johobase.com
Vue.jsのコーディングに便利なVisual Studio Code＋Vetur
Vue.jsをこれから始めようとしている方や、初めて間もない方にとっては、Vue.jsのコーディングのしやすさも大事ではないかと思い...
johobase.com
jsFiddleでVue.jsのサンプルプログラムを作成する
ここでは、jsFiddleを利用してVue.jsのコーディングを行います。
Vue.jsをこれから始めようという方はローカルに環境...
johobase.com
Vue.jsのコーディングがすぐに始められるHTMLのテンプレートテキスト
この記事では、Vue.jsのちょっとしたコーディングをすぐに始めることができるように、HTMLファイルに記述するテンプレートのコード...
johobase.com
Vue CLIでプロジェクトを作成する [Vue.js]
Vue.jsには、アプリケーションのプロジェクトのテンプレートを自動生成してくれるコマンドラインツールの「Vue CLI」が用意され...
johobase.com
Viteでプロジェクトを作成する [Vue.js]
Vue.jsには以前から、アプリケーションのプロジェクトを自動生成してくれるコマンドラインツールの「Vue CLI」が用意されていま...
johobase.com
Vue CLIのGUIツールを使ってプロジェクトを作成して管理する [Vue.js]
本ブログでは、以前にVue CLIでプロジェクトを作成する手順について紹介しました。
Vue CLIでは、コマンドを利用してプ...
johobase.com
要素の操作
テキストボックス（input、textarea）を操作する [Vue.js]
Vue.jsではv-modelディレクティブを使用することで、HTMLのフォーム（form要素）のテキストボックス（input要素や...
johobase.com
チェックボックス（input[type="checkbox"]）を操作する [Vue.js]
Webアプリケーションでは、チェックボックスを使用してユーザーのオプション選択を取得することがよくあります。
例えば、アンケートア...
johobase.com
セレクト（選択）ボックス（select）を操作する [Vue.js]
Webアプリケーションでは、ユーザーに項目を選択させるためにselect要素でセレクトボックス（選択ボックス）を利用することがよくあ...
johobase.com
ラジオボタン（input[type="radio"]）を操作する [Vue.js]
複数の項目から1つを選択させるラジオボタンのオプションは、多くのWebアプリケーションで利用されています。
例えば、性別を選択する...
johobase.com
リスト（<ul><ol><li>）レンダリング（v-for） [Vue.js]
Webアプリケーションでは、データをリスト（一覧）で表示することがよくあります。
例えば、データを検索して結果を一覧で表示したり、...
johobase.com
テーブル（<table><tr><td>）レンダリング（v-for） [Vue.js]
前回の記事では、v-forディレクティブを使用してリストを描画する方法について紹介しました。
リスト（ul, ol, ...
johobase.com
Vue 2.x
高さを自動調整するテキストエリアコンポーネント [Vue.js, TypeScript]
データベースのテーブルのスキーマ情報をもとに、エンティティクラスのソースコードを自動生成するジェネレーターを作成する際に、ソースコードの行数...
johobase.com
UML 描画ライブラリ nomnoml でテーブルの ER 図を作成 [Vue.js, TypeScript]
Vue CLI のプロジェクトで、nomnoml という JavaScript のライブラリを使用して、データベースのテーブルの ER ダイ...
johobase.com
Web上で色が作成できるカラーミキサーコンポーネント [Vue.js, JavaScript]
Vue.jsを使用してWeb（ブラウザー）上で色の作成ができるカラーミキサーコンポーネントを作成します。
カラーミキサーコンポーネントはR...
johobase.com
Vueのライフサイクルを理解する [Vue.js v2.x]
今回はVueインスタンスのライフサイクルについて理解していこうと思います。
インスタンスのライフサイクル
Vueのインスタン...
johobase.com
リンク
